el-checkbox-group单选
时间: 2023-05-08 17:56:31 浏览: 771
el-checkbox-group是一个Vue组件,用于呈现一个多选的复选框列表。然而,在开发中,有时需要单选项,就需要将其改为单选。
实现单选很简单,只需将每个选项的v-model绑定到同一个变量即可。例如,假设有三个选项:选项1、选项2和选项3。那么可以创建一个名为selected的data属性,并将每个选项的v-model绑定到它。代码如下:
<el-checkbox-group v-model="selected">
<el-checkbox label="选项1"></el-checkbox>
<el-checkbox label="选项2"></el-checkbox>
<el-checkbox label="选项3"></el-checkbox>
</el-checkbox-group>
<script>
export default {
data() {
return {
selected: ""
};
}
};
</script>
在这个例子中,变量selected的值将是一个字符串,它将是所选选项的标签。如果用户选择了选项1,那么selected的值将变为“选项1”。如果后来又选择了选项2,selected的值将变为“选项2”。但是,如果选项2和选项1不是单选,那么用户将能够同时选择它们。
为了确保只有一个选项被选中,我们需要把每个选项的v-model的值改为相同的值。此外,还需要在el-checkbox上添加一个v-on:change事件监听器,这样当用户选择一个新选项时,就会取消选择先前选中的选项。
<el-checkbox-group v-model="selected">
<el-checkbox label="选项1" v-model="selected" v-on:change="selected='选项1'"></el-checkbox>
<el-checkbox label="选项2" v-model="selected" v-on:change="selected='选项2'"></el-checkbox>
<el-checkbox label="选项3" v-model="selected" v-on:change="selected='选项3'"></el-checkbox>
</el-checkbox-group>
<script>
export default {
data() {
return {
selected: ""
};
}
};
</script>
这些更改将确保只有一个选项是选中的,而其他选项将被取消选中。现在,我们已经把el-checkbox-group转变成了单选。
阅读全文