Element UI select组件如何实现对多个字段模糊查询?如下,当多个下拉框,每个下拉框数据都是同一份,同时要支持对多个字段查询
1、利用select的filter-method和visible-change方法
2、利用:value="item.label",这样当切换其他下拉框,则不会相互影响选择的数据(该实现方式适用于label值唯一)
<el-select placeholder="请选择" v-model="selected" filterable :filter-method="value => (fuzzyName = value)" @visible-change="() => (fuzzyName = '')" default-first-option>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label" />
</el-select>
computed: {
options() {
if (!this.fuzzyName) {
return this.list;
} else {
return this.list.filter((item) => {
return (
String(item.value)
.toUpperCase()
.includes(this.fuzzyName.toUpperCase()) ||
String(item.label)
.toUpperCase()
.includes(this.fuzzyName.toUpperCase())
);
});
}
},
}