使用Vue.js隐藏表格列

Question

你好，我需要隐藏或显示数据表格中的列，但不知道最佳实践是什么。当勾选列复选框时，该列将被显示，如果未勾选，则该列将被隐藏。我正在使用vuetify。 这是我的脚本: https://codepen.io/anon/pen/rmXwYG?editors=1010

new Vue({
    el: '#app',
    data() {
      return {
        search: '',
        totalItems: 0,
        items: [],
        loading: true,
        pagination: {},
        columns: [],
        headers: [{
                text: 'Dessert (100g serving)',
                left: true,
                sortable: false,
                value: 'name'
            },
            {
                text: 'Calories',
                value: 'calories'
            },
            {
                text: 'Fat (g)',
                value: 'fat'
            },
            {
                text: 'Carbs (g)',
                value: 'carbs'
            },
            {
                text: 'Protein (g)',
                value: 'protein'
            },
            {
                text: 'Sodium (mg)',
                value: 'sodium'
            },
            {
                text: 'Calcium (%)',
                value: 'calcium'
            },
            {
                text: 'Iron (%)',
                value: 'iron'
            }
        ]
    }
    },
    watch: {
        pagination: {
            handler() {
                this.getDataFromApi()
                    .then(data => {
                        this.items = data.items
                        this.totalItems = data.total
                    })
            },
            deep: true
        }
    },
    mounted() {
        this.getDataFromApi()
            .then(data => {
                this.items = data.items
                this.totalItems = data.total
            })
    },
    methods: {
        getDataFromApi() {
            this.loading = true
            return new Promise((resolve, reject) => {
                const {
                    sortBy,
                    descending,
                    page,
                    rowsPerPage
                } = this.pagination

                let items = this.getUsers()
                const total = items.length

                if (this.pagination.sortBy) {
                    items = items.sort((a, b) => {
                        const sortA = a[sortBy]
                        const sortB = b[sortBy]

                        if (descending) {
                            if (sortA < sortB) return 1
                            if (sortA > sortB) return -1
                            return 0
                        } else {
                            if (sortA < sortB) return -1
                            if (sortA > sortB) return 1
                            return 0
                        }
                    })
                }

                if (rowsPerPage > 0) {
                    items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
                }

                setTimeout(() => {
                    this.loading = false
                    resolve({
                        items,
                        total
                    })
                }, 1000)
            })
        },
        getUsers() {
            return [{
                    value: false,
                    name: 'Frozen Yogurt',
                    calories: 159,
                    fat: 6.0,
                    carbs: 24,
                    protein: 4.0,
                    sodium: 87,
                    calcium: '14%',
                    iron: '1%'
                },
                {
                    value: false,
                    name: 'Ice cream sandwich',
                    calories: 237,
                    fat: 9.0,
                    carbs: 37,
                    protein: 4.3,
                    sodium: 129,
                    calcium: '8%',
                    iron: '1%'
                },
                {
                    value: false,
                    name: 'Eclair',
                    calories: 262,
                    fat: 16.0,
                    carbs: 23,
                    protein: 6.0,
                    sodium: 337,
                    calcium: '6%',
                    iron: '7%'
                },
                {
                    value: false,
                    name: 'Cupcake',
                    calories: 305,
                    fat: 3.7,
                    carbs: 67,
                    protein: 4.3,
                    sodium: 413,
                    calcium: '3%',
                    iron: '8%'
                },
                {
                    value: false,
                    name: 'Gingerbread',
                    calories: 356,
                    fat: 16.0,
                    carbs: 49,
                    protein: 3.9,
                    sodium: 327,
                    calcium: '7%',
                    iron: '16%'
                },
                {
                    value: false,
                    name: 'Jelly bean',
                    calories: 375,
                    fat: 0.0,
                    carbs: 94,
                    protein: 0.0,
                    sodium: 50,
                    calcium: '0%',
                    iron: '0%'
                },
                {
                    value: false,
                    name: 'Lollipop',
                    calories: 392,
                    fat: 0.2,
                    carbs: 98,
                    protein: 0,
                    sodium: 38,
                    calcium: '0%',
                    iron: '2%'
                },
                {
                    value: false,
                    name: 'Honeycomb',
                    calories: 408,
                    fat: 3.2,
                    carbs: 87,
                    protein: 6.5,
                    sodium: 562,
                    calcium: '0%',
                    iron: '45%'
                },
                {
                    value: false,
                    name: 'Donut',
                    calories: 452,
                    fat: 25.0,
                    carbs: 51,
                    protein: 4.9,
                    sodium: 326,
                    calcium: '2%',
                    iron: '22%'
                },
                {
                    value: false,
                    name: 'KitKat',
                    calories: 518,
                    fat: 26.0,
                    carbs: 65,
                    protein: 7,
                    sodium: 54,
                    calcium: '12%',
                    iron: '6%'
                }
            ]
        }
    }
})

- Codinga

---

https://dev59.com/B2035IYBdhLWcg3wZ_Mt - Borjante

Answer 1

简短的回答是使用计算属性来决定包含哪些列。

您的数据表接受标题列表和项目列表（行）。我已经在您的Vue中添加了一些计算属性，以返回应包括在数据表结果中的列列表。

computed:{
  filteredHeaders(){
    return this.headers.filter(h => h.selected)
  },
  filteredItems(){
    return this.items.map(item => {
      let filtered = Object.assign({}, item)
      this.headers.forEach(header => {
        if (!header.selected) delete filtered[header.value]
      })
      return filtered
    })
  }
},

注意，这些计算出的值是使用标题属性中的selected属性。我将该属性添加到您的标题列表中，以便您可以选择要包含在输出中的标题。

{
  text: 'Fat (g)',
  value: 'fat',
  selected: true
},

接下来，你的复选框需要使用该属性作为它们的模型。

<v-checkbox v-bind:label="header.text" v-model="header.selected" :value="header.selected" ></v-checkbox>

最后，您每行都有一个模板。我修改了它来检查每个列是否已启用。

<template slot="items" scope="props">
  <td v-if="showColumn('name')">{{ props.item.name }}</td>
  <td v-if="showColumn('calories')"  class="text-xs-right">{{ props.item.calories }}</td>
  <td v-if="showColumn('fat')"  class="text-xs-right">{{ props.item.fat }}</td>
  <td v-if="showColumn('carbs')"  class="text-xs-right">{{ props.item.carbs }}</td>
  <td v-if="showColumn('protein')"  class="text-xs-right">{{ props.item.protein }}</td>
  <td v-if="showColumn('sodium')"  class="text-xs-right">{{ props.item.sodium }}</td>
  <td v-if="showColumn('calcium')"  class="text-xs-right">{{ props.item.calcium }}</td>
  <td v-if="showColumn('iron')"  class="text-xs-right">{{ props.item.iron }}</td>
</template>

这里是在模板中使用的showColumn方法。

showColumn(col){
  return this.headers.find(h => h.value === col).selected
},

最后，这里有一个工作示例。

显然，这不是调整过的版本，只是一个最初的“让它工作”的版本。但它应该能帮助你开始。

- Bert

---

@codinga 这个回答解决了您的问题吗？ - Bert

是的，非常感谢你。我承认你总是帮助我。 - Codinga

Answer 2

只需设置fields属性即可定义您希望显示的列。

- user2998553

Answer 3

同时循环所有字段

例如： <b-table striped hover :items="items" :fields="fields"></b-table>

祝您愉快。

- Viranja kaushalya