element ui 复选框，点击特定值时候，其他不能点击(disabled)

拼搏现实的明天。 2022-09-06 00:20 122阅读 0赞

<template>
      <div class="home">
        <p v-for="(item, index) in moniObj" :keys="index">
          <span class="fl-left font-size mar-l10 mar-top-10"
            >{
       { item.WiringTypeName }}:</span
          >
          <el-col :span="24">
            <span>
              <el-checkbox-group
                v-model="item.checkList"
                class="mar-top-10 fl-left mar-l10"
                @change="e => changeCheckbox(e, item)"
              >
                <el-checkbox
                  :label="child.DictKey"
                  v-for="(child, indexchild) in item.Items"
                  :key="indexchild"
                  :value="child.DictKey"
                  :disabled="item.checkList.includes(item.Items[item.Items.length - 1].DictKey) && child.DictKey !== item.Items[item.Items.length - 1].DictKey"
                >
                  {
       { child.DictValue }}
                </el-checkbox>
              </el-checkbox-group>
            </span>
          </el-col>
          <span class="fl-left mar-top-20 font-size mar-l10">
            {
       { item.DescriptionName }}:</span
          >
          <el-col :span="24" class="width-80 mar-top-10 ml-2">
            <el-input v-model="item.Description" type="textarea" row="1" />
          </el-col>
        </p>
      </div>
    </template>
    
    <script>
    import HelloWorld from "@/components/HelloWorld.vue";
    export default {
      name: "Home",
      components: {
        HelloWorld,
      },
      computed: {},
      data() {
        return {
          moniObj: [
            {
              WiringTypeName: "垂直",
              checkList: [],
              Items: [
                {
                  DictValue: "测试11",
                  DictKey: 1
                },
                {
                  DictValue: "测试22",
                  DictKey: 2
                },
                {
                  DictValue: "测试332",
                  DictKey: 3
                },
                {
                  DictValue: "不涉及",
                  DictKey: 4
                }
              ]
            },
            {
              WiringTypeName: "水平",
              checkList: [],
              Items: [
                {
                  DictValue: "测试66",
                  DictKey: 1
                },
                {
                  DictValue: "测试44",
                  DictKey: 2
                },
                {
                  DictValue: "测试555",
                  DictKey: 3
                },
                {
                  DictValue: "不涉及",
                  DictKey: 4
                }
              ]
            }
          ]
        };
      },
      methods: {
        changeCheckbox(e, item) {
          const val = item.Items[item.Items.length - 1].DictKey
          if (e[e.length-1] === val) {
            e.splice(0, e.length - 1)
          }
        }
      },
    };
    </script>