element ui多选实现 选项互斥

element ui多选实现 选项互斥

先说一下需求吧 就是需要用到多选框 比如4个按钮A,B,C,D
D按钮随便选，A B C 需要i互斥 怎么解决呢？
下面放代码

 <el-checkbox-group v-model="agenttype">
                  <el-checkbox label="2" @change="changeSelect(2)">标准Radius客户端</el-checkbox>
                  <el-checkbox label="4" @change="changeSelect(4)">Windows logon认证代理</el-checkbox>
                  <el-checkbox label="8" @change="changeSelect(8)">Linux PAM认证代理</el-checkbox>
                  <el-checkbox label="1073741824" checked>普通认证代理</el-checkbox>
                </el-checkbox-group>

el-checkbox有一个change事件 当选项改变的时候 我们可以给他一个值区分不同的选项然后使用changeSelect来判断 代码 如下

changeSelect(type) {
      console.log(type)
      if (type == 2) {
        let exampleValue = ['4', '8']
        for (let i = 0; i < this.agenttype.length; i++) {
          if (exampleValue.includes(this.agenttype[i])) {
            this.agenttype.splice(i, 1)
          }
        }
      } else if (type == 4) {
        this.isLang = true
        this.typeNum = 0
        let exampleValue = ['2', '8']
        for (let i = 0; i < this.agenttype.length; i++) {
          if (exampleValue.includes(this.agenttype[i])) {
            this.agenttype.splice(i, 1)
          }
        }
      } else {
        this.typeNum = 1
        let exampleValue = ['2', '4']
        for (let i = 0; i < this.agenttype.length; i++) {
          if (exampleValue.includes(this.agenttype[i])) {
            this.agenttype.splice(i, 1)
          }
        }
      }

我写的比较简单用的if判断 如果有好一些的方法 希望大家能一起讨论一下 谢谢了
具体思路是这样的 比如要点击A按钮 那么判断一下现在v-model列表里面有没有 B 或者C 在里面 如果在里面 说明这两个选项被选中了 那么我就for循环一下 吧这个给删除。
大致就是这个思路 有什么问题 欢迎一起讨论。