使用 vue js 隐藏表格列

Question

你好我需要隐藏或显示我的DataTable的列，我不知道这样做的好的做法，当检查列复选框时，将显示列，如果它没有检查，则将隐藏列？ 我正在使用 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%'
                }
            ]
        }
    }
})

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
},

最后，这是一个工作示例。

显然这没有经过调整或任何东西，它只是一个初始的“让它工作”的版本。 但它应该让你前进。

Answer 2

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

Answer 3

也循环所有字段

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

享受。