选中过的框怎么可以禁用

Question

<template>
  <div style="margin: 50px;">
    <div v-for="(v,i) in arrList" :key="i">
      <el-checkbox-group v-model="arrList[i].label" >
        <el-checkbox v-for="(item, index) in data" :key="index" :label="item.label" @change="changeCheck($event,item.label,i)">
          <div style="margin-bottom: 10px;">{{ item.label }}</div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button @click="add">添加</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        arrList:[
          {
            label:['不限']
          }
        ],
        data: [
          {label: '不限'},
          {label: '一级'},
          {label: '二级'}, 
          {label: '三级',}
        ],
      }
    },
    methods: {
      changeCheck(e,val,ind) {
        if(e) {
          if(val === '不限') {
            this.arrList[ind].label = ['不限'];
          }else {
            const index = this.arrList[ind].label.findIndex(item => item === '不限');
            if(index > -1) {
              this.arrList[ind].label.splice(index,1);
            }
          }
          if(this.arrList[ind].label.length>1) {
          this.arrList[ind].label.shift()
        }
        }
      },
      add(){
        let obj = {label:[ '不限']}
        this.arrList.push(obj)
      }
    }
  }
</script> 

Answer 1

<template>
  <div style="margin: 50px;">
    <div v-for="(v,i) in arrList" :key="i">
      <el-checkbox-group v-model="arrList[i]">
        <el-checkbox
          v-for="(item) in data"
          :key="item.id"
          :label="item.id"
          :disabled="computedDisable(item.id,i)"
          @change="changeCheck(item.id,i)"
        >
          <div style="margin-bottom: 10px;">{{ item.label }}</div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button @click="add">添加</el-button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      arrList: [
        [0]
      ],
      data: [
        { label: '不限' },
        { label: '一级' },
        { label: '二级' },
        { label: '三级' }
      ]
    }
  },
  created() {
    this.data = this.data.map((e, i) => {
      return { ...e, ...{
        disable: false,
        id: i
      }}
    })
  },
  methods: {
    computedDisable(id, i) {
      if (this.arrList[i].includes(id)) {
        return false
      }
      return !!this.arrList.flat().includes(id)
    },
    add() {
      this.arrList.push([])
    }
  }
}
</script>

个人习惯不喜欢用中文做id，可以根据你需要改动