const state = reactive({
util: {
aList: [{val:'abv'},{val:'wfasd'},{val:'klj'}],
bList: [{val:'terf'},{val:'gfds'},{val:'mbnn'}],
cList: [{val:'ghfsa'},{val:'puio'},{val:'gdf'}]
},
// 用于显示过滤后的列表
filtered: {
aList: [],
bList: [],
cList: []
},
queryForm: {
a: '',
b: '',
c: ''
}
})筛选方法：
const filterList = (query, listName) => {
if (query.length > 0) {
state.filtered[listName] = state.util[listName].filter(item =>
item.val.toLowerCase().includes(query.toLowerCase())
)
} else {
// 如果查询为空，则显示完整列表
state.filtered[listName] = [...state.util[listName]]
}
}为每个 el-select 绑定对应的列表和过滤方法：
<el-select
v-model="queryForm.a"
clearable
filterable
:filter-method="(e) => filterList(e, 'aList')"
style="width: 240px"
>
<el-option
v-for="item in filtered.aList"
:key="item.val"
:label="item.val"
:value="item.val"
/>
</el-select>
<el-select
v-model="queryForm.b"
clearable
filterable
:filter-method="(e) => filterList(e, 'bList')"
style="width: 240px"
>
<el-option
v-for="item in filtered.bList"
:key="item.val"
:label="item.val"
:value="item.val"
/>
</el-select>
初始化 filtered 列表
onMounted(() => {
// 初始化所有过滤列表
Object.keys(state.util).forEach(key => {
state.filtered[key] = [...state.util[key]]
})
})