el-select选中某个选项后,禁用该选项,其他el-select不能选中该选项,取消选中该选项后,解除该选项的禁用
时间: 2023-06-10 21:08:21 浏览: 170
可以通过监听 `change` 事件来实现这个功能。具体实现步骤如下:
1. 给每个 `el-select` 绑定 `change` 事件。
2. 在事件处理函数中,获取当前选中的选项。
3. 遍历所有 `el-select`,将当前选中的选项禁用,并设置其他 `el-select` 中相同选项为禁用状态。
4. 如果取消选中当前选项,则将其解除禁用状态。
下面是一个示例代码,你可以参考一下:
```html
<template>
<div>
<el-select v-model="selected" @change="handleChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
</el-select>
<el-select v-model="selected" @change="handleChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [
{ label: '选项1', value: '1', disabled: false },
{ label: '选项2', value: '2', disabled: false },
{ label: '选项3', value: '3', disabled: false },
],
};
},
methods: {
handleChange() {
// 获取当前选中的选项
const selectedOption = this.options.find(item => item.value === this.selected);
// 遍历所有 el-select,禁用当前选中的选项,并设置其他相同选项为禁用状态
this.$nextTick(() => {
const selects = document.querySelectorAll('.el-select');
selects.forEach(select => {
const options = select.querySelectorAll('li');
options.forEach(option => {
if (option.getAttribute('data-value') === selectedOption.value) {
option.classList.add('is-disabled');
}
if (option.classList.contains('selected')) {
const value = option.getAttribute('data-value');
const sameOption = this.options.find(item => item.value === value);
if (sameOption && sameOption.value !== selectedOption.value) {
option.classList.add('is-disabled');
sameOption.disabled = true;
}
}
});
});
});
},
},
};
</script>
```
上面的代码中,我们给每个 `el-select` 绑定了 `change` 事件,并在事件处理函数中实现了禁用选项和解除禁用选项的逻辑。当选项状态改变时,我们通过遍历所有 `el-select`,找到需要禁用的选项,并设置为禁用状态。如果取消选中当前选项,则将其解除禁用状态。注意,由于 `el-select` 是异步渲染的,所以我们需要在 `$nextTick` 中处理选项状态。
阅读全文