el-checkbox实现单选
时间: 2023-12-19 22:05:42 浏览: 90
checkbox单选功能
el-checkbox可以通过一些技巧实现单选,以下是两种实现方式:
1. 多个单选框实现单选
```html
<template>
<el-checkbox-group v-model="checkList" @change="statusChange">
<el-checkbox label="1">1</el-checkbox>
<el-checkbox label="2">2</el-checkbox>
<el-checkbox label="3">3</el-checkbox>
<el-checkbox label="4">4</el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
checkList: []
};
},
methods: {
statusChange(value) {
if (this.checkList.length > 1) {
this.checkList.splice(0, 1);
}
}
}
};
</script>
```
2. 两个多选框实现单选
```html
<template>
<el-checkbox-group v-model="status">
<el-checkbox false-label="null" :true-label="1" name="status">启用</el-checkbox>
<el-checkbox false-label="null" :true-label="2" name="status">禁用</el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
status: 1
};
}
};
</script>
```
阅读全文