Vue FilterMore是一個Vue.js組件，它允許您通過添加更多過濾器來創建和定制列表過濾器。它可以根據您選擇的選項來顯示或隱藏過濾器，使用戶可以更好地控制他們想要過濾的數據。

使用Vue FilterMore非常簡單。只需像安裝任何其他Vue.js組件一樣將它添加到您的項目中：

npm install vue-filter-more --save

然后，在您的Vue實例中導入Vue FilterMore：

import FilterMore from 'vue-filter-more'

可以使用以下幾種方法來自定義Vue FilterMore：

• filters：您可以通過指定過濾器名稱、值和選項來定義您想要的過濾器；
• options：您可以指定自定義選項來控制過濾器列表的外觀和行為；
• defaultBehavior：您可以為過濾器列表定義默認行為，如默認顯示或隱藏所有過濾器。

以下是一個示例代碼，展示如何使用Vue FilterMore以根據選項過濾列表數據：

<template>
<div>
<filter-more :filters='filters' :options='options' :default-behavior='defaultBehavior' v-model='selectedFilter' />
<ul>
<li v-for='item in filteredItems' :key='item.id'>{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import FilterMore from 'vue-filter-more';
export default {
data() {
return {
items: [
{id: 1, name: 'Item 1', category: 'category 1'},
{id: 2, name: 'Item 2', category: 'category 2'},
{id: 3, name: 'Item 3', category: 'category 1'},
{id: 4, name: 'Item 4', category: 'category 2'},
{id: 5, name: 'Item 5', category: 'category 3'},
],
selectedFilter: '',
filters: [
{name: 'Category', type: 'dropdown', field: 'category', items: [
{value: 'category 1', text: 'Category 1'},
{value: 'category 2', text: 'Category 2'},
{value: 'category 3', text: 'Category 3'},
]},
{name: 'Name', type: 'text', field: 'name'},
],
options: {
icon: 'fa fa-filter',
position: 'left',
showClearButton: true,
},
defaultBehavior: {
showAll: true,
clearAll: true,
values: {category: 'category 3'},
},
}
},
computed: {
filteredItems() {
if (this.selectedFilter === '') {
return this.items;
}
return this.items.filter(item =>item[this.selectedFilter.field] === this.selectedFilter.value);
}
},
components: {
FilterMore,
}
};
</script>