极客观点
项目管理
HarmonyOS
在数据表中，我只想显示属性“display”为“true”的项目。组件 v-data-table 中有属性“filter”。但是没有示例显示如何使用它。
我尝试了几种方法，但没有成功。以下代码片段也可在 codepen 获得。
new Vue({
el: '#app',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
],
desserts: [
{
value: false,
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
display: false
},
{
value: false,
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
display: true
},
{
value: false,
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
display: false
},
{
value: false,
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
display: true
},
{
value: false,
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
display: false
},
{
value: false,
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
display: true
},
{
value: false,
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
display: false
},
{
value: false,
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
display: false
},
{
value: false,
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
display: false
},
{
value: false,
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
display: false
}
]
}
},
methods: {
filterItems(val, search) {
return val.display;
}
}
})
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
item-key="name"
:filter="filterItems"
>
<template slot="items" slot-scope="props">
<tr @click="props.expanded = !props.expanded" :class="[props.expanded && 'expanded']">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</tr>
</template>
<template slot="expand" slot-scope="props">
<v-card flat>
<v-card-text>Peek-a-boo!</v-card-text>
</v-card>
</template>
</v-data-table>
</v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
</body>
</html>
代码中有问题的部分是：
methods: {
filterItems(val, search) {
return ???;
}
}
原文由 Antonín Slejška 发布，翻译遵循 CC BY-SA 4.0 许可协议
我在这个问题上苦苦挣扎了很长时间，因为我也认为 :filter 不起作用。后来，在经历了很多痛苦之后，我意识到我需要一个 :search prop 来使用 :filter，而我想要的功能并不是 Vuetify 提供的功能。
像你一样，我想用一个返回布尔值的函数来过滤我的数据表，即：如果应该显示行，则为真。
如果有人正在寻找一个快速的解决方案来做同样的事情，一个简单的“v-if”应该可以解决问题。基于上面的示例：
当然还有其他解决方案，具体取决于您的需要，例如在 desserts 数组本身上使用 .filter 方法。
就我而言，因为我想在我的数据表中始终一次显示 5 行（不使用隐藏操作），所以我最终使用了 created() 生命周期挂钩，而不是 v-if：
},