动态渲染elementUI多选框的全选功能

 HTML部分

    <div class="mb">
      <el-row>
        <el-col :span="8" :offset="4">
          <span>{{ checkBox.qgqzy[0].zyname }}</span>
        </el-col>
        <el-col :span="5" :offset="7">
          <!-- 全选 -->
          <el-checkbox
            :indeterminate="indeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
        </el-col>
      </el-row>
      <!-- 多选的内容区 -->
      <div class="checkboxWarp">
        <el-checkbox-group v-model="qgqzyFilter" @change="checkedqgChange">
          <el-checkbox
            v-for="item in checkBox.qgqzy"
            :key="item.id"
            :label="item.mlcode"
            style="display: block"
            v-model="item.mlname"
            >{{ item.mlname }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>

js

 data() {
    return {

      // 地区专业选中的值
      form: {
        dqcode: "",
        zycode: "",
      },
      // 后端返回的表的数据
      checkBox: {
        qgqzy: [{ dqname: "" }],
        qgfj: [{ dqname: "" }],
        zjfj: [{ dqname: "" }],
      },
      // 自己修改后端返回来的值确定全选内容
      qgqzyFilter: [],
      // 该多选框的总长度
      qgqzyFilterLength: 0,
      // 全选绑定的值
      checkAll: true,
      indeterminate: false,
    };
  },
  created() {
    posts("ml/zlk", this.form).then((res) => {
      this.checkBox = res;
      // 拿到一个当前选项的数组
      this.qgqzyFilter = this.checkBox.qgqzy.map((item) => {
        return item.mlcode;
      });
      // 将总长度先存一下
      this.qgqzyFilterLength = res.qgqzy.length;
    });
  },

  methods: {
    // 选区内容判断图标样式
    checkedqgChange(value) {
      let checkedCount = value.length;
      // 选中的长度与总长度相等  全选标记为true
      this.checkAll = checkedCount === this.qgqzyFilterLength;
      // 不全选且不全不选状态    全选图标状态为true
      this.indeterminate =
        checkedCount > 0 && checkedCount < this.qgqzyFilterLength;
    },
    // 全选的事件
    handleCheckAllChange(val) {
      const all = this.checkBox.qgqzy.map((item) => {
        return item.mlcode;
      });
      // 判断当前内容是全选还是清空
      this.qgqzyFilter = val ? all : [];
      this.indeterminate = false;
    },
}