使用element-ui中Select 选择器多选的情况下,怎样实现el-option选项选中一个另一个取消勾选,实现el-option互斥
时间: 2023-10-25 08:12:06 浏览: 125
你可以使用select 组件的 @change 属性监听值的变化,然后在方法中对选中的选项进行处理,将选中的选项以外的其他选项的选中状态设为 false。可以参考如下代码实现:
```
<template>
<el-select v-model="selectedOptions" multiple @change="handleOptionChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' },
{ label: '选项四', value: 'option4' },
],
}
},
methods: {
handleOptionChange(val) {
const selectedValue = val[val.length - 1]
this.options.forEach((option) => {
if (option.value !== selectedValue) {
option.state = false
}
})
},
},
}
</script>
```
在以上代码中,通过监听 Select 组件的 change 事件,获取选中的选项的值。然后对 options 数组进行遍历,对选中的选项以外的其他选项的选中状态设置为 false。这样就可以实现 ElOption 的互斥了。
阅读全文