vue2 el-checkbox-group復選框無法選中問題及解決

更新時間：2024年05月28日 16:20:26 作者：小果子^_^

這篇文章主要介紹了vue2 el-checkbox-group復選框無法選中問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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復選框組 , 組與組之間的選項是互斥的效果

效果

在這里插入圖片描述

代碼實現(xiàn)（方法一）

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 => {
        // 初始化數(shù)據(jù)，復選框都可選
        item.checkData.forEach(jitem => {
          jitem.disabled = false
        })
        // 將選中的數(shù)據(jù)存儲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)) {
            // 當復選框對應數(shù)據(jù)存在arr中，不存在對應的checked中時，設為禁用狀態(tài)
            jitem.disabled = true
          }
        })
      })
    }
  }
}
</script>

代碼實現(xiàn)（方法二）

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)
        // 轉為一維數(shù)組
        const selectedArr = tempArr.flat();
        // 其它的已選，禁用
        return selectedArr.includes(opt.label)
      }
    }
  }
}
</script>