Vuetify数据表条件列呈现

Question

如何根据其中一个值是true还是false来显示或隐藏vuetify数据表列？

假设我有以下基本数据表和数据，我希望能够隐藏我想要的任何列。就像我不想看到任何与碳水化合物或蛋白质有关的东西。

<template>
<v-content>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
</v-data-table>
</v-content>
</template>
<script>
export default {
name: 'someTable',
computed: {
},
components: {
//
},
data: () => ({
test: true,
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' }
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3
}
]
})
};
</script>

Answer 1

为标头使用计算属性：

<template>
<v-content>
<v-data-table
:headers="_headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
</v-data-table>
</v-content>
</template>
<script>
export default {
name: 'someTable',
computed: {
},
components: {
//
},
data: () => ({
test: true,
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
show: true 
},
{ text: 'Calories', value: 'calories', show:true },
{ text: 'Fat (g)', value: 'fat', show:true },
{ text: 'Carbs (g)', value: 'carbs', show:false  },
{ text: 'Protein (g)', value: 'protein', show:false  }
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3
}
]
}),
computed : {
_headers () {
return this.headers.filter(x=>x.show)
}
}
};
</script>