vue中使用Checkbox 多选框循环遍历

首先效果展示

步骤如下：
1、html

		<el-form>
          <el-form-item v-for="(item, index) in dataList" :key="index">
            <el-checkbox
              @change="(val) => handleCheckAllListChange(val, item)"
              :indeterminate="itemIndeterminate(item)"
              v-model="item.checkAll"
              >{{ item.label }}</el-checkbox
            >
            <el-checkbox-group
              v-model="checkedData"
              @change="handleCheckedCitiesChange"
              style="padding-left: 30px;"
            >
              <el-checkbox
                style="width: 230px;"
                v-for="items in item.child"
                :key="items.field"
                :label="items"
                >{{ items.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>

2、js

  data() {
    return {
      checkedData: [], //选择多选框时选中的值
      // 所有导出数据
      dataList: [],
      //实际数组格式为
      // dataList: [
      //   {
      //     field: "gasUser",
      //     label: "用户基础信息",
      //     child: [
      //       {
      //         field: "userId",
      //         label: "用户账号",
      //         dictKey: null,
      //         dateFormat: null
      //       },
      //       {
      //         field: "userName",
      //         label: "姓名",
      //         dictKey: null,
      //         dateFormat: null
      //       }
      //     ]
      //   },
      //   {
      //     field: "gasUserInfo",
      //     label: "用户身份信息",
      //     child: [
      //       {
      //         field: "certificateType",
      //         label: "证件类型",
      //         dictKey: "certificate_type",
      //         dateFormat: null
      //       },
      //       {
      //         field: "certificateNo",
      //         label: "证件号码",
      //         dictKey: null,
      //         dateFormat: null
      //       }
      //     ]
      //   },
      //   {
      //     field: "gasUserPackage",
      //     label: "用户订购套餐",
      //     child: [
      //       {
      //         field: "wireless",
      //         label: "无线套餐",
      //         dictKey: null,
      //         dateFormat: null
      //       },
      //       {
      //         field: "wired",
      //         label: "有线套餐",
      //         dictKey: null,
      //         dateFormat: null
      //       },
      //       {
      //         field: "mixed",
      //         label: "混合套餐",
      //         dictKey: null,
      //         dateFormat: null
      //       }
      //     ]
      //   },
      //   {
      //     field: "gasUserOperator",
      //     label: "用户绑定宽带",
      //     child: [
      //       {
      //         field: "broadband",
      //         label: "运营商对接配置和用户宽带账号",
      //         dictKey: null,
      //         dateFormat: null
      //       },
      //       {
      //         field: "operatorUserPassword",
      //         label: "用户宽带密码",
      //         dictKey: null,
      //         dateFormat: null
      //       }
      //     ]
      //   }
      // ]
    };
  },
  methods: {
  	    // 获取所有导出选项
    doExport() {
      exporAllSelect(this.exportSelectUrl).then((res) => {
        this.dataList = res;
        // 添加checkAll是否全选
        this.dataList = this.dataList.map((v) => ({
          ...v,
          checkAll: false
        }));
        this.dataList.forEach((item) => {
          let newChild = item.child.filter((v) => {
            return v.selected;
          });
          if (newChild.length == item.child.length) {
            item.checkAll = true;
          } else {
            item.checkAll = false;
          }
        });
        res.forEach((item) => {
          item.child.forEach((v) => {
            if (v.selected) {
              this.checkedData.push(v);
            }
          });
        });
      });
    },
     // 全选
    handleCheckAllListChange(val, item) {
      // 过滤掉没有选中的数据，item.child中不包含v时返回-1
      const filterArr = this.checkedData.filter(
        (v) => item.child.indexOf(v) == -1
      );
      this.checkedData = val ? filterArr.concat(item.child) : filterArr;
    },
    // 是否全选
    itemIndeterminate(item) {
      return (
        item.child.some((v) => this.checkedData.indexOf(v) > -1) &&
        !item.child.every((v) => this.checkedData.indexOf(v) > -1)
      );
    },
    handleCheckedCitiesChange() {
      this.dataList.forEach((item) => {
        item.checkAll = true;
        item.child.forEach((v) => {
          if (!this.checkedData.includes(v)) {
            item.checkAll = false;
          }
        });
      });
    },
    // 导出
    submitExport() {
      // 最后设置数据格式变成跟原来data的数据格式一样
        this.checkedData = this.dataList
          .map((v) => ({
            label: v.label,
            field: v.field,
            child: v.child.filter((v) => this.checkedData.indexOf(v) > -1)
          }))
          .filter((v) => v.child.length);
      }
  }