投稿日現在、データテーブルに「カスタムフィルタ」小道具を使用するためのドキュメントが見つかりません。vuetifyのデータテーブルで「カスタムフィルタ」propを使用するにはどうすればよいですか？またはヘッダーでフィルタリングするカスタムフィルタを作成するにはどうすればよいですか？
ヘッダーでデータテーブルをフィルタリングするカスタムフィルタを作成したいだけです。 私はドロップダウンを持っています。ユーザーがドロップダウンのオプションの1つをクリックすると、特定の1つのヘッダーのリストがフィルタリングされます。
例： ドロップダウンオプション： 食品の種類：フルーツ、肉、野菜
私が肉としてドロップダウンを選択した場合、それは私に豚肉とシックしか表示されませんケン太腿。
code on Githubを参照すると、filter小道具がテーブル内のアイテムにどのように適用されるかを決定するために使用されるデフォルトのメソッドを上書きするために、customFilter 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小道具にも依存することがわかります。
あなたがしたいことに本当にその小道具を使用する必要はありません。ドロップダウン値に基づいてアイテムをフィルタリングし、計算されたプロパティをitems propとして渡すための計算されたプロパティを作成するだけです。ここで
は例です：
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