如何使复选框的不限改为不选

img


<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($event,item.id,i)"
        >
          <div style="margin-bottom: 10px;">{{ item.name }}{{ item.id }}</div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button @click="add">添加</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        arrList: [
          [0]
        ],
        data: [
          {
            id: 0,
            name: "不限",
            identity: "nolimit",
            disable: false
          },
          {
            id: 1,
            name: "采购人",
            identity: "owner_name",
            disable: false
          },
          {
            id: 2,
            name: "供应商",
            identity: "bid_name",
            disable: false
          },
          {
            id: 3,
            name: "中介方",
            identity: "agency_name",
            disable: false
          },
          {
            id: 4,
            name: "共同投标公司",
            identity: "candidate_name",
            disable: false
          },
        ]
      }
    },
    methods: {
      computedDisable(id, i) {
        if (this.arrList[i].includes(id)) {
          return false
        }
        return !!this.arrList.flat().includes(id)
      },
      changeCheck(e, val, ind) {
        if (e) {
          if (val === '不限') {
            this.arrList[ind] = ['不限'];
          } else {
            const index = this.arrList[ind].findIndex(item => item === '不限');
            if (index > -1) {
              this.arrList[ind].splice(index, 1);
            }
          }
          if (this.arrList[ind].length > 1) {
            this.arrList[ind].shift()
          }
        }
      },
      add() {
        this.arrList.push([])
      }
    }
  }
</script>

img

img

修改disable的值不就是更改能不能选中么,根据自己的需求判断是false还是true。