el-checkbox-group如何改为单选
时间: 2024-10-10 07:04:06 浏览: 86
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选,单选
5星 · 资源好评率100%
在Element UI的`el-checkbox-group`组件中,如果需要将原来的复选框组改为单选模式,你可以通过设置`type`属性为`radio`来实现。当你选择其中一个选项后,其他选项会自动取消选中。示例如下:
```html
<template>
<el-form-item label="请选择一项">
<el-radio-group v-model="selectedValue" type="radio">
<el-radio label="Option 1">选项一</el-radio>
<el-radio label="Option 2">选项二</el-radio>
<el-radio label="Option 3">选项三</el-radio>
</el-radio-group>
</el-form-item>
</template>
<script>
export default {
data() {
return {
selectedValue: '', // 当前选中的值
};
},
}
</script>
```
在这个例子中,`v-model`绑定的数据`selectedValue`决定了当前选中的单选按钮。如果你想限制用户只能选择一个选项,可以确保这个数据只允许有一个值,并在表单提交之前检查是否只有一个选项被选中。
阅读全文