多个el-select共用同一个筛选列表,控制一个el-select选择某项后,其它el-select需要清空该项了
时间: 2023-08-15 16:13:51 浏览: 111
el-select 下拉框多选实现全选的实现
您可以通过监听第一个`el-select`的`change`事件,然后在事件处理程序中将其他`el-select`的绑定值设置为空。以下是一个示例代码:
```vue
<template>
<div>
<el-select v-model="selectedItem" @change="handleSelectChange">
<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="selectedItem2">
<el-option v-for="item in filteredSelectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="selectedItem3">
<el-option v-for="item in filteredSelectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectList: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' }
],
selectedItem: '',
selectedItem2: '',
selectedItem3: ''
};
},
computed: {
filteredSelectList() {
// 这里可以根据需求进行筛选列表的逻辑
return this.selectList;
}
},
methods: {
handleSelectChange() {
this.selectedItem2 = '';
this.selectedItem3 = '';
}
}
};
</script>
```
在上述代码中,我们使用了一个`selectList`数组来存储筛选列表的选项。当第一个`el-select`的选择项发生变化时,`handleSelectChange`方法会被调用,然后将其他`el-select`的绑定值清空,从而实现了清空功能。注意,这里的`filteredSelectList`是一个计算属性,你可以根据实际需求对筛选列表进行逻辑处理。
阅读全文