Element UI select组件如何实现对多个字段模糊查询?

266 阅读1分钟

Element UI select组件如何实现对多个字段模糊查询?如下,当多个下拉框,每个下拉框数据都是同一份,同时要支持对多个字段查询

image-20231020160809215.png

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())
					);
				});
			}
		},
}