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