vue项目elementui 的 el-checkbox复选框改成单选框:实现单选、反选功能

我的需求是:只有2个选项。又想使用复选框的样式,自己又不想去改样式。

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

效果:

vue项目elementui 的 el-checkbox复选框改成单选框:实现单选、反选功能

代码:

 <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: ['管理员', '编辑'], //角色列表
      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)
      }
    }

 

上一篇:面试官:MySQL如何实现查询数据并根据条件更新到另一张表?


下一篇:记录mysql函数GROUP_CONCAT用法及踩坑点