vue element复选

效果如下:

html代码:

 <div class="el-checkbox">
   <p class="title-p">请选择要展示的指标并等级排序</p>
   <!-- 复选 -->
   <div
     v-for="(item, index) in CheckList"
     :key="index"
   >
     <el-checkbox
       :indeterminate="item.isIndeterminate"
       v-model="item.isCheck"
       @change="checkTitle(item.isCheck, index)"
     >{{item.title}}</el-checkbox>

     <el-checkbox-group
       v-model="item.checkedData"
       @change="checkItem(item.checkedData, index)"
     >
       <el-checkbox
         v-for="(a, index) in item.children"
         :label="a.value"
         :key="index"
       >{{ a.label }}</el-checkbox>
     </el-checkbox-group>
   </div>
 </div>

js代码:

methods: {
	//复选框
    checkItem(val, index) {
      let checkedCount = val.length;
      this.CheckList[index].isCheck =
        checkedCount === this.CheckList[index].children.length;
      this.CheckList[index].isIndeterminate =
        checkedCount > 0 && checkedCount < this.CheckList[index].children.length;
    },
    checkTitle(val, index) {
      let arr = [];
      const re = this.CheckList[index].children;
      //全选
      if (val) {
        for (let i = 0; i < re.length; i++) {
          arr[i] = re[i]["value"];
        }
      }
      this.CheckList[index].checkedData = arr;
      this.CheckList[index].isIndeterminate = false;
    },
}

data() {
    return {
      checkAll: false,
      checkedCities: [],
      CheckList: [
        {
          isCheck: false,
          isIndeterminate: true,
          title: '品牌',
          checkedData: [],
          children: [],
        },
        {
          isCheck: false,
          isIndeterminate: true,
          title: '大区',
          checkedData: [],
          children: [
            {
              value: "001",
              label: "小区",
            },
          ],
        },
        {
          isCheck: false,
          isIndeterminate: true,
          title: '省份',
          checkedData: [],
          children: [
            {
              value: "01",
              label: "城市",
            },
          ],
        },
        {
          isCheck: false,
          isIndeterminate: true,
          title: '运营指标',
          checkedData: [],
          children: [
            {
              value: "11",
              label: "OCC",
            },
            {
              value: "12",
              label: "房费ADR",
            },
            {
              value: "13",
              label: "房费Revpar",
            },
            {
              value: "14",
              label: "综合ADR",
            },
          ],
        },
        {
          isCheck: false,
          isIndeterminate: true,
          title: '时间单位',
          checkedData: [],
          children: [
            {
              value: "21",
              label: "年度",
            },
            {
              value: "22",
              label: "季度",
            },
            {
              value: "23",
              label: "月度",
            },
            {
              value: "24",
              label: "周",
            },
            {
              value: "25",
              label: "日",
            },
          ],
        },
      ],
    }
}