el-checkbox复选框做单选
时间: 2025-06-16 22:13:01 浏览: 6
### 使用 `el-checkbox` 实现单选效果
为了使 Element UI 的 `el-checkbox` 组件实现单选的效果,可以利用 `el-checkbox-group` 和自定义逻辑来控制选项的选择状态。具体做法如下:
在模板部分,使用 `<el-checkbox-group>` 来包裹多个 `<el-checkbox>` 元素,并通过 `v-model` 将其绑定到一个变量上用于存储当前选中的值[^1]。
```html
<template>
<div>
<!-- 定义 checkbox group -->
<el-checkbox-group v-model="form.picShow" @change="handleChange">
<el-checkbox false-label="null" true-label="0">显示</el-checkbox>
<el-checkbox false-label="null" true-label="1">隐藏</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
form: {
picShow: null,
},
preItem: {},
};
},
methods: {
handleChange(val) {
// 当改变时更新表单项的状态并保存之前的值以便恢复
this.form.picShow = val === "null" || !val ? this.preItem.picShow : val;
this.preItem.picShow = this.form.picShow;
}
}
};
</script>
```
上述代码片段展示了如何配置 `el-checkbox` 达成单选目的的方法之一。每当用户点击不同的复选框时,会触发 `@change` 事件处理器函数 `handleChange()`,该函数负责调整实际被选中的项以及处理特殊情况下的默认行为。
阅读全文
相关推荐


















