多选框转换为单选框使CheckBox拥有Radio同样的功能（以Ant Design of Vue为例）

原创

已于 2022-11-21 19:01:19 修改 · 6.9k 阅读

标签

#vue.js #javascript #前端

于 2022-03-17 17:30:19 首次发布

本文分享了如何使用Ant Design的Checkbox组件通过编程逻辑实现单选效果，通过动态调整选中项和临时缓存来模拟多选框操作，适合解决特殊需求的界面设计。

前言：开发过程遇到的需求，要求实现单选功能，但是单选框样式却是多选框的样式，故记录一下（仅仅记录思路）。

首先是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',
        },
    ]
}

最后是核心代码（很简单，应该都能看懂的），如果有看不懂的可以留言，欢迎沟通。主要思路：多选框要选择多个选项必定会先选第二项，那么，可以利用