el-checkbox复选框改变成单选框,不要用el-radio
时间: 2023-11-08 16:14:36 浏览: 95
input:checkbox多选框实现单选效果跟radio一样
可以通过监听el-checkbox的change事件来实现将el-checkbox改变为单选框的功能。具体实现方式如下:
1. 给每个el-checkbox设置一个唯一的name属性;
2. 监听el-checkbox的change事件,在事件处理函数中,遍历所有的el-checkbox,将除当前点击的el-checkbox外的其他el-checkbox的checked属性均设为false。
以下是示例代码:
```html
<template>
<div>
<el-checkbox v-model="checkedList[0]" name="option1" @change="handleChange">选项1</el-checkbox>
<el-checkbox v-model="checkedList[1]" name="option2" @change="handleChange">选项2</el-checkbox>
<el-checkbox v-model="checkedList[2]" name="option3" @change="handleChange">选项3</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checkedList: []
};
},
methods: {
handleChange(checked) {
const name = event.target.name;
this.checkedList.forEach((item, index) => {
if (index !== name) {
this.checkedList[index] = false;
}
});
}
}
};
</script>
```
阅读全文