Bootstrap

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 的不确定状态,一般用于实现全选的效果

;