VUE+Elementui实现复选框的多选与全选

效果图：

<template>
  <el-table
    :data="tableData"
    class="permissionstable"
    height="267px"
    :show-header="false"
    style="width: 26%; border: 1px solid #dfe6ec; margin: 0 auto; top: 25%"
    :default-expand-all="true"
  >
    <el-table-column type="expand" width="35px">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item>
            <el-checkbox-group
              v-model="props.row.resourceNameList"
              class="resourceCheckClass"
            >
              <el-checkbox
                v-for="(item, index) in props.row.children"
                :key="index"
                :value="item.resourceId"
                :label="item.resourceId"
                name="type"
                @change="resourceCheckItem(props.row, props.row.children)"
                style="width: 100px"
                :disabled="props.row.chargingEventsDisabled"
                >{{ item.resourceName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column width="25">
      <template slot-scope="props">
        <el-checkbox
          :indeterminate="props.row.isIndeterminate"
          v-model="props.row.checkAll"
          @change="handleSelectionChange(props.row, props.row.children)"
          :disabled="props.row.chargingEventsDisabled"
          >全选</el-checkbox
        >
      </template>
    </el-table-column>
    <el-table-column label="resourceName" prop="resourceName" width="80">
    </el-table-column>
    <el-table-column>
      <template slot-scope="props" width="35">
        <div
          :style="{
            display: props.row.chargingEventsDisabled ? 'block' : 'none',
          }"
          style="color: red"
        >
          *此模块无权限
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<style>
.el-form--inline .el-form-item {
  margin-left: 45px;
}
/* 滚动条 */
::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:vertical {
  display: none;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track:vertical {
  border-radius: 10px;
  background-color: black;
}
::-webkit-scrollbar-track-piece {
  background-color: #dce7f0;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:vertical {
  border-radius: 10px;
  background-color: #1890ff;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:vertical:hover {
  background: #1890ff;
}
</style>
<script>
import _ from "lodash";
export default {
  data() {
    return {
      // 需要展示的数据
      tableData: [],
      // 后台返回的数据
      tableData2: [
        {
          resourceId: "0",
          resourceName: "用户管理",
          isSelected: "0",
          children: [
            {
              resourceId: "00",
              resourceName: "查看",
              isSelected: "0",
            },
            {
              resourceId: "01",
              resourceName: "新增",
              isSelected: "0",
            },
            {
              resourceId: "02",
              resourceName: "修改",
              isSelected: "0",
            },
            {
              resourceId: "03",
              resourceName: "删除",
              isSelected: "0",
            },
            {
              resourceId: "04",
              resourceName: "确认",
              isSelected: "0",
            },
            {
              resourceId: "05",
              resourceName: "结束",
              isSelected: "0",
            },
            {
              resourceId: "06",
              resourceName: "导出",
              isSelected: "0",
            },
            {
              resourceId: "07",
              resourceName: "导入",
              isSelected: "0",
            },
            {
              resourceId: "08",
              resourceName: "归档",
              isSelected: "0",
            },
          ],
        },
        {
          resourceId: "1",
          resourceName: "收费事件",
          isSelected: "0",
          children: [
            {
              resourceId: "00",
              resourceName: "查看",
              isSelected: "0",
            },
            {
              resourceId: "01",
              resourceName: "新增",
              isSelected: "0",
            },
            {
              resourceId: "02",
              resourceName: "修改",
              isSelected: "0",
            },
            {
              resourceId: "03",
              resourceName: "删除",
              isSelected: "0",
            },
            {
              resourceId: "04",
              resourceName: "确认",
              isSelected: "0",
            },
            {
              resourceId: "05",
              resourceName: "结束",
              isSelected: "0",
            },
            {
              resourceId: "06",
              resourceName: "导出",
              isSelected: "0",
            },
            {
              resourceId: "07",
              resourceName: "导入",
              isSelected: "0",
            },
            {
              resourceId: "08",
              resourceName: "归档",
              isSelected: "0",
            },
          ],
        },
        {
          resourceId: "3",
          resourceName: "事件管理",
          isSelected: "0",
          children: [
            {
              resourceId: "00",
              resourceName: "查看",
              isSelected: "0",
            },
            {
              resourceId: "01",
              resourceName: "新增",
              isSelected: "0",
            },
            {
              resourceId: "02",
              resourceName: "修改",
              isSelected: "0",
            },
            {
              resourceId: "03",
              resourceName: "删除",
              isSelected: "0",
            },
            {
              resourceId: "04",
              resourceName: "确认",
              isSelected: "0",
            },
            {
              resourceId: "05",
              resourceName: "结束",
              isSelected: "0",
            },
            {
              resourceId: "06",
              resourceName: "导出",
              isSelected: "0",
            },
            {
              resourceId: "07",
              resourceName: "导入",
              isSelected: "0",
            },
            {
              resourceId: "08",
              resourceName: "归档",
              isSelected: "0",
            },
          ],
        },
        {
          resourceId: "4",
          resourceName: "角色管理",
          isSelected: "0",
          children: [
            {
              resourceId: "00",
              resourceName: "查看",
              isSelected: "0",
            },
            {
              resourceId: "01",
              resourceName: "新增",
              isSelected: "0",
            },
            {
              resourceId: "02",
              resourceName: "修改",
              isSelected: "0",
            },
            {
              resourceId: "03",
              resourceName: "删除",
              isSelected: "0",
            },
            {
              resourceId: "04",
              resourceName: "确认",
              isSelected: "0",
            },
            {
              resourceId: "05",
              resourceName: "结束",
              isSelected: "0",
            },
            {
              resourceId: "06",
              resourceName: "导出",
              isSelected: "0",
            },
            {
              resourceId: "07",
              resourceName: "导入",
              isSelected: "0",
            },
            {
              resourceId: "08",
              resourceName: "归档",
              isSelected: "0",
            },
          ],
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.getTableData();
  },
  methods: {
    // 获取表格数据
    getTableData() {
      // 实际开发中，在这里会请求后台数据，得到tableData2这个数组，
      // _.cloneDeep是为了深度克隆tableData2，以免之后的操作影响到原数组
      let tableData = _.cloneDeep(this.tableData2);
      tableData.forEach((item) => {
        if (item.children && item.children.length > 0) {
          // 存放选中的数据
          let selectDataList = [];
          item.children.forEach((evt) => {
            if (Number(evt.isSelected === 1)) {
              selectDataList.push(evt.resourceId);
            }
          });
          // resourceNameList是el-checkbox-group中v-model需要绑定的数据，必须是一个数组，存放选中的数据
          item.resourceNameList = selectDataList;
          // checkAll是判断当前目录是否全选
          item.checkAll = selectDataList.length === item.children.length;
          if (item.checkAll) {
            item.isSelected = "1";
          }
          // isIndeterminate是判断当前目录是否为半选中状态
          item.isIndeterminate =
            selectDataList.length > 0 &&
            selectDataList.length < item.children.length;
          // 如果是收费事件，则禁用复选框
          if (item.resourceName === "收费事件") {
            item.chargingEventsDisabled = true;
          }
        }
      });
      // 将处理好的数据赋给真正需要渲染到页面上的数组
      this.tableData = tableData;
    },
    // 子目录选中事件
    resourceCheckItem(evt, val) {
      let checkedCount = val.length;
      let refResourceNameList = _.cloneDeep(evt.resourceNameList);
      let childrenData = _.cloneDeep(evt.children);
      let deleteIdList = [];
      childrenData.forEach((item) => {
        deleteIdList.push(item.resourceId);
      });
      // 两个数组比较，取出相同的元素，代表当前选中的数据
      let date = refResourceNameList.filter(
        (item) => deleteIdList.indexOf(item) > -1
      );
      // 当前所有数据长度等于选中数据的长度，则表示全选状态
      evt.checkAll = checkedCount === date.length;
      // 当前半选中状态要等于当前选中的数据长度大于0并且当前选中的数据长度小于当前的所有数据长度
      evt.isIndeterminate = date.length > 0 && date.length < checkedCount;
    },
    // 目录全选事件
    handleSelectionChange(evt, val) {
      // 如果checkAll为true表示全选，否则取消全选
      if (evt.checkAll) {
        if (evt.children && evt.children.length > 0) {
          let childrenDataList = _.cloneDeep(evt.children);
          let optionsData = [];
          // 拿到子目录的数据，并将子目录里的isSelected都赋值为1
          childrenDataList.forEach((item) => {
            item.isSelected = "1";
            optionsData.push(item.resourceId);
          });
          // 如果之前已经有选中的，则追加
          let refResourceNameList = _.cloneDeep(evt.resourceNameList);
          let arr = refResourceNameList.concat(optionsData);
          // 去重
          evt.resourceNameList = Array.from(new Set(arr));
          // 将当前目录的isSelected赋值为1
          evt.isSelected = "1";
          // 取消半选中状态
          evt.isIndeterminate = false;
        }
      } else {
        let refResourceNameList = _.cloneDeep(evt.resourceNameList);
        let childrenData = _.cloneDeep(evt.children);
        let deleteIdList = [];
        childrenData.forEach((item) => {
          deleteIdList.push(item.resourceId);
        });
        // 进行这一步操作是因为所有数据都在一个表格里，为了防止取消全选则全部取消全选的问题，这样可以控制只取消当前目录
        // 删除数据相同的元素
        let arr = refResourceNameList.filter(
          (item) => !deleteIdList.some((i) => i == item)
        );
        evt.isSelected = "0";
        evt.resourceNameList = arr;
      }
    },
  },
};
</script>