vue项目elementui 的 el-checkbox复选框改成单选框样式：实现全选、全否、单选、反选功能（最简单的方法）

我的需求是：需要单选功能，又想使用复选框的样式，自己又不想去自定义修改样式。所以可以使用如下的方法：

于是可以用js去控制选中的值，如果选中值的长度大于1，则每次只截取第二个数。因为选中值是从后面追加进去的。第二个数就是最新选中值。

我看网上有很多方法可以实现这个效果。但是我自己写的这个方法最简单。

单选功能：点击哪个就选中哪个

反选功能：再次点击同一个，就能实现反选功能

手动全否功能：目前这个代码、可以手动点击。全都不选就行了。

一键全选、全否功能（在文末）

效果：

代码：

 <el-form-item label="角色" :label-width="formLabelWidth">
          <el-checkbox-group v-model="someList.role">
            <el-checkbox v-for="(item,index) in roleList" :label="item" :key="index"
                         @change="handleCheckedRolesChange(item,someList)">{{ item }}
            </el-checkbox>
          </el-checkbox-group>
</el-form-item>
  data() {
    return {
      action: '', //当前行为，change（修改用户信息），add（新增用户）
      someList: [], //需要修改的某条用户数据
      roleList: ['管理员', '编辑', '编辑2', '编辑3', '编辑4'], //角色列表
      userlist: [
        {
          name: ' 测试账号1',
          account: 'abc111',
          password: '111',
          phone: '1234567890',
          role: ['编辑'],
          other: '其他备注',
          isDisable: 'true'
        }
        ]
}
}
    //角色单选
    handleCheckedRolesChange(item, someList) {
      if (someList.role.length > 1) {
        // someList.role=[]
        // this.$message.error('只能设置一种角色！');
        console.log(someList.role)
        let one = someList.role.splice(1)
        someList.role = one
        console.log(one)
      }
    }

大功告成！

以上就是代码就可以实现所要的功能了。

---

下面是知识补充：

Array.slice(start,end)，

从start开始，end之前结束，不到end；如果不给end值，从start开始到数组结束。start可以给负值，-1表示数组最后位置，-2表示倒数第二个，以此类推，顾前不顾后。在数组中添加删除或替换元素
splice();在任意位置添加或删除元素,返回删除或被替换的值，如果没有被删除或替换则返回空数组;
splice()方法会修改原数组的值;
只有一个值时，从当前位置删除到数组末尾

let arr=[1,2,3,4,5];
let num1=arr.splice(1)
console.log(num1,arr)//num1=[2,3,4,5];arr=[1];

VM390:3 (4) [2, 3, 4, 5] [1]

关于js数组的常用方法。可以看看这篇文章：

JavaScript数组的常用方法总结：遍历，复制，反转，排序，添加，删除（前端常见面试题必考必问_勤动手多动脑少说多做厚积薄发-CSDN博客_js数组倒序输出1.　Array.push()向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。一个：var fruits = ["Banana", "Orange", "Apple", "Mango"];var x=fruits.push("Kiwi");console.log(fruits)//(5) ["Banana", "Orange", "Apple", "Mango", "Kiwi"] console.log(x)//5 x是 新的数组长度多个：var fruits =https://blog.csdn.net/qq_22182989/article/details/120995392

 一键全选、全否功能：

如果想使用全选功能的话。elementui 有自带的全选、全否功能：

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/checkbox

indeterminate 状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果