多选框转换为单选框 使CheckBox拥有Radio同样的功能(以Ant Design of Vue为例)
前言:开发过程遇到的需求,要求实现单选功能,但是单选框样式却是多选框的样式,故记录一下(仅仅记录思路)。首先是antd的代码,如下<a-checkbox-group @change="onChangeOption" v-model="checkBoxObj.checkedList"><a-checkbox v-for="(item, index) in checkBoxObj.c
·
前言:开发过程遇到的需求,要求实现单选功能,但是单选框样式却是多选框的样式,故记录一下(仅仅记录思路)。
首先是antd的代码,如下
<a-checkbox-group @change="onChangeOption" v-model="checkBoxObj.checkedList">
<a-checkbox v-for="(item, index) in checkBoxObj.children" :key="index" :value="item.val">
{{ item.label }}
</a-checkbox>
</a-checkbox-group>
接着是checkbox配置项的代码:
checkBoxObj: {
checkedList: [1], // 此处需要一个默认值,保证初始选中
tempCheckedList: [1], // 此处需要一个默认值,保证初始选中
children: [
{
val: 1,
label: '选项1',
},
{
val: 2,
label: '选项2',
},
{
val: 3,
label: '选项3',
},
{
val: 4,
label: '选项4',
},
{
val: 5,
label: '选项5',
},
]
}
最后是核心代码(很简单,应该都能看懂的),如果有看不懂的可以留言,欢迎沟通。主要思路:多选框要选择多个选项必定会先选第二项,那么,可以利用数组的slice()方法,实现每多选一项就把前面一项“挤出去”,如此便实现了单选,再对取消选中加以限制,就实现了需求。代码如下:
onChangeOption(checkedList) {
if (checkedList.length < 1) { // 实现必须有一个选中的效果
this.checkBoxObj.checkedList = this.checkBoxObj.tempCheckedList; // 点击选中项不能取消选中
return;
}
checkedList = checkedList.slice(1); // 实现单选效果
this.checkBoxObj.tempCheckedList = checkedList; // 缓存当前选中项,在取消选中时使用
this.checkBoxObj.checkedList = checkedList; // 更新选中
},
更多推荐
已为社区贡献2条内容
所有评论(0)