el-checkbox单选
时间: 2023-08-29 20:14:08 浏览: 61
Element UI 的 `el-checkbox` 是一个多选框组件,用于选择多个选项。如果你想要实现单选效果,可以借助 `v-model` 指令和绑定的数据来控制只能选择一个选项。
以下是一个示例,展示如何通过将 `v-model` 绑定到一个变量,并使用 change 事件来实现 `el-checkbox` 的单选效果:
```html
<template>
<div>
<el-checkbox v-model="selectedItem" @change="handleCheckboxChange('item1')">选项1</el-checkbox>
<el-checkbox v-model="selectedItem" @change="handleCheckboxChange('item2')">选项2</el-checkbox>
<el-checkbox v-model="selectedItem" @change="handleCheckboxChange('item3')">选项3</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: ''
};
},
methods: {
handleCheckboxChange(item) {
this.selectedItem = item;
}
}
};
</script>
```
在上面的示例中,我们创建了三个 `el-checkbox`,并将它们的 `v-model` 都绑定到同一个 `selectedItem` 变量上。通过监听 `change` 事件,我们在方法 `handleCheckboxChange` 中更新了 `selectedItem` 的值,从而实现了单选的效果。
请注意,如果你想要有默认选中的选项,可以在 `data` 中初始化 `selectedItem` 的值。
希望这个示例对你有帮助!如果还有其他问题,请随时提问。