elementui 复选框组如何在选中其中一个后清除其他选中选项
时间: 2024-04-19 08:24:06 浏览: 20
要实现在选中一个复选框后清除其他选中选项,你可以使用 Element UI 中的 `Checkbox` 组件结合事件处理。
首先,在模板中,使用 `v-model` 绑定一个数组来跟踪选中的复选框的值:
```html
<template>
<div>
<el-checkbox-group v-model="checkedOptions">
<el-checkbox v-for="option in options" :label="option" :key="option">{{ option }}</el-checkbox>
</el-checkbox-group>
</div>
</template>
```
然后,在 Vue 实例中,定义 `checkedOptions` 数组和一个方法来处理复选框选中事件:
```javascript
<script>
export default {
data() {
return {
options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
checkedOptions: []
};
},
watch: {
checkedOptions(newVal) {
if (newVal.length > 1) {
this.checkedOptions = [newVal[newVal.length - 1]];
}
}
}
};
</script>
```
在上述代码中,`checkedOptions` 数组用于存储选中的复选框的值。通过 `watch` 监听 `checkedOptions` 的变化,当选中的复选框数量超过1时,只保留最后一个选中的复选框值。
这样,在选中一个复选框后,其他选中的选项会被清除。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)