使用vue multiselect筛选表

Question

我正在尝试使用vue-multiselect来过滤表的结果。我可以在VUE开发工具中看到所选值，作为多选组件的一部分。我如何使用这些要在filter()函数中使用的值来获得筛选后的表结果。

下面你可以看到我的JS脚本实现和模板多选实现。

JS脚本

export default {
data: () => ({
policies: [],
selectedValues: [],
options: [],
}),
methods: {
filterByStatus: function({ label, value }) {
return this.policies.filter(data => {
let status= data.status.toLowerCase().match(this.selectedValues.toLowerCase());
},

模板

<multiselect
v-model="selectedValues"
:options="options"
:multiple="true"
label="label"
track-by="label"
placeholder="Filter by status"
@select="filterByStatus"
></multiselect>

Answer 1

您的选择组件正在使用道具:multiple="true"，这意味着绑定值selectedValues和v-model将返回一组策略对象。

创建两个计算属性，而不是在方法组件选项中使用filterByStatus函数。

一个计算所选策略状态的数组，另一个计算要显示的已筛选策略数组。

脚本：

computed: {
selectedStatuses() {
const statuses = []
for (const { status } of this.selectedValues) {
statuses.push(status.toLowerCase())
}
return statuses
},
filteredPolicies() {
if (this.selectedStatuses.length === 0) {
return this.policies
}
const policies = []
for (const policy of this.policies) {
if (this.selectedStatuses.includes(policy.status.toLowerCase())) {
policies.push(policy)
}
}
return policies
}
}

模板：

<multiselect
v-model="selectedValues"
:options="options"
:multiple="true"
label="label"
track-by="label"
placeholder="Filter by status"
></multiselect>

示例：

Vue.config.productionTip = Vue.config.devtools = false
new Vue({
name: 'App',
components: {
Multiselect: window.VueMultiselect.default
},
data() {
return {
policies: [{
label: 'Policy A',
status: 'enabled'
}, {
label: 'Policy B',
status: 'disabled'
}, {
label: 'Policy C',
status: 'Deprecated'
}],
selectedValues: [],
options: [{
label: 'Enabled',
status: 'enabled'
}, {
label: 'Disabled',
status: 'DISABLED'
}, {
label: 'Deprecated',
status: 'DePrEcAtEd'
}]
}
},
computed: {
selectedStatuses() {
const statuses = []
for (const {
status
} of this.selectedValues) {
statuses.push(status.toLowerCase())
}
return statuses
},
filteredPolicies() {
if (this.selectedStatuses.length === 0) {
return this.policies
}
const policies = []
for (const policy of this.policies) {
if (this.selectedStatuses.includes(policy.status.toLowerCase())) {
policies.push(policy)
}
}
return policies
}
},
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="app">
<multiselect v-model="selectedValues" :options="options" :multiple="true" label="label" track-by="label" placeholder="Filter by status"></multiselect>
<pre>Policies: {{ filteredPolicies}}</pre>
</div>

Answer 2

最好将过滤函数保留在computed中。

computed:{
filterByStatus: function ({label, value}) {
return this.policies.filter((data) => {
return data.status && data.status.toLowerCase().includes(this.selectedValues.toLowerCase())
});
}
}

在模板部分中使用filterByStatus将实时呈现结果。

<div>{{filterByStatus}}</div>

Answer 3

当任何更改或选择时，您可以对selectedValues使用监视：

watch:{
selectedValues: function(value){
this.policies.filter(data => {
let status= data.status.toLowerCase().match(this.selectedValues.toLowerCase());
}

}

Answer 4

我在一个vue3项目中就是这样做的，其中我有多个带有多个项目的下拉列表，可以选择进行过滤，并带有文本输入框：

const filterByInput = (item: string) =>
item.toLowerCase().includes(state.searchInput.toLowerCase());
const filteredItems = computed(() => {
let fItems = JSON.parse(JSON.stringify(props.items));
if (state.searchInput) {
fItems = fItems.filter((item) => filterByInput(item.title));
}
if (state.filterByState.length) {
fItems = fItems.filter((item) => state.filterByState.includes(item.state));
}
if (state.filterByType.length) {
fItems = fItems.filter((item) => state.filterByType.includes(item.typeId));
}
if (state.filterByPublishing !== null) {
fItems = fItems.filter((item) => item.published === state.filterByPublishing);
}
return fItems;
// NOTE: other options that you can try (should be placed above `return`)
// const filterMultiSelect = (fItems, selectedItems, key) => {
//   // OPT-1: foreach
//   const arr = [];
//   fItems.forEach((item) => {
//     if (selectedItems.includes(item[key])) {
//       arr.push(item);
//     }
//   });
//   return arr;
//   // OPT-2: filter
//   return fItems.filter((item) => selectedItems.includes(item[key]));
// };
// if (state.filterByState.length) {
//   fItems = filterMultiSelect(fItems, state.filterByType, 'typeId');
// }
});

你可以在这个要点中找到完整的代码