需求

多个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>