多个el-checkbox-group复选框组 选项互斥

需求

多个el-checkbox-group复选框组 , 组与组之间的选项是互斥的效果

效果

代码实现（方法一）

• template

<template>
  <div class="page">
    <el-checkbox-group
      v-for="(item, index) in list"
      v-model="item.checked"
      :key="index"
      @change="checkboxChange"
    >
      <el-checkbox
        v-for="(jitem, jindex) in item.checkData"
        :label="jitem.label"
        :key="jindex"
        :disabled="jitem.disabled"
        >{{ jitem.name }}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>

• script

<script>
export default {
  name: 'xxx',
  data() {
    return {
      list: [
        {
          checked: [], // 选中值
          checkData: [
            // 复选框
            { label: 'name1', name: '名称1', disabled: false },
            { label: 'name2', name: '名称2', disabled: false },
            { label: 'name3', name: '名称3', disabled: false }
          ]
        },
        {
          checked: [],
          checkData: [
            { label: 'name1', name: '名称1', disabled: false },
            { label: 'name4', name: '名称4', disabled: false },
            { label: 'name3', name: '名称3', disabled: false }
          ]
        },
        {
          checked: [],
          checkData: [
            { label: 'name1', name: '名称1', disabled: false },
            { label: 'name4', name: '名称4', disabled: false },
            { label: 'name3', name: '名称3', disabled: false }
          ]
        },
        {
          checked: [],
          checkData: [
            { label: 'name5', name: '名称5', disabled: false },
            { label: 'name1', name: '名称1', disabled: false },
            { label: 'name3', name: '名称3', disabled: false }
          ]
        }
      ]
    }
  },
  methods: {
    /**
     * @description 复选框change事件
     * @param {array} val 复选框值
     * @param {number} i 索引
     * @return {void} Do not return anything
     */
    checkboxChange() {
      let checkedAll = []// 存储所有的选中值
      this.list.forEach(item => {
        // 初始化数据，复选框都可选
        item.checkData.forEach(jitem => {
          jitem.disabled = false
        })
        // 将选中的数据存储arr中
        item.checked.forEach(kitem => {
          checkedAll.push(kitem)
        })
      })
      // 去重
      checkedAll = Array.from(new Set(checkedAll))
      // 互斥操作
      this.list.forEach(item => {
        item.checkData.forEach(jitem => {
          if (checkedAll.includes(jitem.label) && !item.checked.includes(jitem.label)) {
            // 当复选框对应数据存在arr中，不存在对应的checked中时，设为禁用状态
            jitem.disabled = true
          }
        })
      })
    }
  }
}
</script>

代码实现（方法二）

• template

<template>
  <div class="page">
    <el-form>
      <el-form-item v-for="(item, index) in list" :label="'复选框组' + (index + 1)"  :key="index">
        <el-checkbox-group v-model="item.checked">
          <el-checkbox
            v-for="(jitem, jindex) in item.checkData"
            :label="jitem.label"
            :key="jindex"
            :disabled="setDisabledMuti(jitem, index)"
            >{{ jitem.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
  </el-form>
  </div>
</template>

• script

<script>
export default {
  name: 'xxx',
  data() {
    return {
      checkedAll: [],
      list: [
        {
          checked: ['name1'], // 选中值
          checkData: [
            // 复选框
            { label: 'name1', name: '名称1' },
            { label: 'name2', name: '名称2' },
            { label: 'name3', name: '名称3' }
          ]
        },
        {
          checked: ['name4'],
          checkData: [
            { label: 'name1', name: '名称1' },
            { label: 'name4', name: '名称4' },
            { label: 'name3', name: '名称3' }
          ]
        },
        {
          checked: ['name3'],
          checkData: [
            { label: 'name1', name: '名称1' },
            { label: 'name4', name: '名称4' },
            { label: 'name3', name: '名称3' }
          ]
        },
        {
          checked: ['name5'],
          checkData: [
            { label: 'name5', name: '名称5' },
            { label: 'name1', name: '名称1' },
            { label: 'name3', name: '名称3' }
          ]
        }
      ]
    }
  },
  //计算属性
  computed: {
    setDisabledMuti() {
      return function(opt, index) {
        // 全部已选择
        const tempArr = this.list.map(item => item.checked)
        // 先删除自己的已选
        tempArr.splice(index, 1)
        // 转为一维数组
        const selectedArr = tempArr.flat();
        // 其它的已选，禁用
        return selectedArr.includes(opt.label)
      }
    }
  }
}
</script>