使用vue

时间:2017-06-01 13:52:53

标签: javascript css3 vuejs2

你好我需要隐藏或显示我的数据表的列,我不知道这样做的好习惯,当选中列复选框时,列会显示,如果没有选中,列将被隐藏? 我正在使用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%'
                }
            ]
        }
    }
})

3 个答案:

答案 0 :(得分:4)

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

您的数据表正在列出标题列表和项目列表(行)。我已经为您的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
},

最后,这是一个working example

显然这没有调整或任何事情,它只是一个初始的&#34;让它工作&#34;版。但它应该让你去。

答案 1 :(得分:0)

只需设置fields道具即可仅定义要显示的列。

答案 2 :(得分:0)

同样循环所有字段

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

享受。