截至發佈日期,我找不到任何文檔在數據表中使用「自定義過濾器」屬性。如何在數據表中使用「自定義過濾器」屬性?或者如何創建一個自定義過濾器來按標題進行過濾?
我只是想創建一個自定義過濾器來通過標頭過濾我的數據表。 我有一個下拉菜單,當用戶點擊其中一個下拉選項時,它會過濾一個特定標題的列表。
例子: 下拉選項: 食品類:水果,肉類,蔬菜
- Bakchoi(蔬菜)
- 豬(肉)
- 雞大腿(肉)
- 西瓜(果)
如果我選擇下拉菜單作爲肉,它應該只顯示我豬肉和別緻肯大腿。
截至發佈日期,我找不到任何文檔在數據表中使用「自定義過濾器」屬性。如何在數據表中使用「自定義過濾器」屬性?或者如何創建一個自定義過濾器來按標題進行過濾?
我只是想創建一個自定義過濾器來通過標頭過濾我的數據表。 我有一個下拉菜單,當用戶點擊其中一個下拉選項時,它會過濾一個特定標題的列表。
例子: 下拉選項: 食品類:水果,肉類,蔬菜
如果我選擇下拉菜單作爲肉,它應該只顯示我豬肉和別緻肯大腿。
看着code on Github,它看起來像customFilter
prop用於覆蓋用於確定如何將filter
prop應用於表中的項目的默認方法。
默認customFilter
方法應用filter
功能,每個項目對象的每個屬性名稱,並過濾掉不包括通過過濾器,一個屬性名稱的任何項目:
customFilter: { type: Function, default: (items, search, filter) => { search = search.toString().toLowerCase() return items.filter(i => ( Object.keys(i).some(j => filter(i[j], search)) )) } },
你如果您想阻止任何列包含在過濾器中,或者您總是希望防止被過濾掉的特定行,您可能想要覆蓋此功能。
您會注意到該方法也取決於search
prop,該prop必須是字符串。
所有這一切,你真的不需要使用該道具來做你想做的事情。您只需製作一個計算屬性即可根據您的下拉值過濾項目,並將該計算屬性作爲items
支柱。
下面是一個例子:
new Vue({
el: '#app',
data() {
return {
food: [
{ name: 'Bakchoi', type: 'vegetable', calories: 100 },
{ name: 'Pork', type: 'meat', calories: 200 },
{ name: 'Chicken Thigh', type: 'meat', calories: 300 },
{ name: 'Watermelon', type: 'fruit', calories: 10 },
],
headers: [
{ text: 'Name', align: 'left', value: 'name' },
{ text: 'Food Type', align: 'left', value: 'type' },
{ text: 'Calories', align: 'left', value: 'calories' },
],
foodType: null,
};
},
computed: {
filteredItems() {
return this.food.filter((i) => {
return !this.foodType || (i.type === this.foodType);
})
}
}
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<div id="app">
<v-app>
<v-select
label="Food Type"
:items="['vegetable', 'meat', 'fruit']"
v-model="foodType"
></v-select>
<v-data-table
:headers="headers"
:items="filteredItems"
hide-actions
>
<template slot="items" scope="{ item }">
<td>{{ item.name }}</td>
<td>{{ item.type }}</td>
<td>{{ item.calories }}</td>
</template>
</v-data-table>
</v-app>
</div>
你也可以去像這樣customFilter辦法,我已經限制了搜索到的類型字段。
new Vue({
el: '#app',
data() {
return {
food: [
{ name: 'Bakchoi', type: 'vegetable', calories: 100 },
{ name: 'Pork', type: 'meat', calories: 200 },
{ name: 'Chicken Thigh', type: 'meat', calories: 300 },
{ name: 'Watermelon', type: 'fruit', calories: 10 },
],
headers: [
{ text: 'Name', align: 'left', value: 'name' },
{ text: 'Food Type', align: 'left', value: 'type' },
{ text: 'Calories', align: 'left', value: 'calories' },
],
search: '',
};
},
methods: {
customFilter(items, search, filter) {
search = search.toString().toLowerCase()
return items.filter(row => filter(row["type"], search));
}
}
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<div id="app">
<v-app>
<v-select
label="Food Type"
:items="['vegetable', 'meat', 'fruit']"
v-model="search"
></v-select>
<v-data-table
:headers="headers"
:items="food"
:search="search"
:custom-filter="customFilter"
hide-actions
>
<template slot="items" scope="{ item }">
<td>{{ item.name }}</td>
<td>{{ item.type }}</td>
<td>{{ item.calories }}</td>
</template>
</v-data-table>
</v-app>
</div>
你摸不着頭腦?我正在尋找相同的信息。 – sterling