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

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

首先是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; // 更新选中
},