vue2 el-checkbox-group复选框无法选中问题及解决_Javascript

vue2 el-checkbox-group 复选框无法选中

原代码

<template slot-scope="scope">
  <el-checkbox v-model="scope.row.bitian">必填</el-checkbox>
</template>

if (this.alltemplatelist && this.alltemplatelist.length > 0) {
  this.alltemplatelist.foreach(template => {
    template.bitian = false;
    template.number = '';
    template.shangchuandatas = [];
    template.wenjiandaxiao = '';
  })
},

修改后

在遍历 this.alltemplatelist 时，使用 vue.set 或 this.$set 来确保新添加的属性是响应式的

if (this.alltemplatelist && this.alltemplatelist.length > 0) {  
  this.alltemplatelist.foreach((template, index) => {  
    this.$set(this.alltemplatelist, index, {  
      ...template,  
      bitian: false,  
      number: '',  
      shangchuandatas: [],  
      wenjiandaxiao: '',  
    });  
  });  
}

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