【ElementUI】实现树形Table表格多选效果，全网最精简版！！

一、HTML 部分

@select=“rowSelect” 监听elementUI表格事件：当用户手动勾选数据行的Checkbox时触发的事件
@select-all=“selectAll” 监听当用户手动勾选全选Checkbox时触发的事件

    <el-table
      :data="list"
      default-expand-all
      ref="multipleTable"
      header-cell-class-name="table-header"
      @selection-change="handleSelectionChange"
      :tree-props="{ children: 'children' }"
      row-key="id"
      @select="rowSelect"
      @select-all="selectAll"
      style="width: 100%"
    >
      >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="类别名称" prop="name"></el-table-column>
      <el-table-column label="分类级别" prop="level"></el-table-column>
      <el-table-column label="类别描述" prop="detail"></el-table-column>
    </el-table>

二、功能实现部分

注：每个数据都要有 isChecked:false 作初始标志参数

1. 单行勾选

① selection 是选中的数据集合
② toggleRowSelection(row, selected) 多选表格切换某一行选中状态,selected 为 true 则选中

rowSelect(selection, row) {
      // 1.当前点击是父节点
      if (row.children) {
        // 1.1 当前父节点没被选中
        if (!row.isChecked) {
          // 子节点全部变为选中
          row.children.map((item) => {
            this.$refs.multipleTable.toggleRowSelection(item, true);
            item.isChecked = true;
          });
          // 当前父节点变为选中
          row.isChecked = true;
        }
        // 1.2 当前父节点选中
        else {
          // 子节点全部取消选中
          row.children.map((item) => {
            this.$refs.multipleTable.toggleRowSelection(item, false);
            item.isChecked = false;
          });
          // 当前父节点取消选中
          row.isChecked = false;
        }
      }
      // 2.当前点击是子节点
      else {
        // 2.1 改变子节点选中状态
        if (!row.isChecked) {
          row.isChecked = true;
        } else {
          row.isChecked = false;
        }
        // 2.2 判断该父节点下的子节点是否全选
        this.$refs.multipleTable.data.map((father) => {
          if (father.name === row.father) {
            let istrue = 0;
            father.children.map((items) => {
              if (items.isChecked === true) istrue += 1;
            });
            // 2.2.1 当前子节点全选
            if (istrue === father.children.length) {
              this.$refs.multipleTable.toggleRowSelection(father, true);
              father.isChecked = true;
            }
            // 2.2.2 当前子节点未选
            else if (istrue === 0) {
              this.$refs.multipleTable.toggleRowSelection(father, false);
              father.isChecked = false;
            }
          }
        });
      }
    },

2. 全选

① selection 是选中的数据集合
② this.$refs.multipleTable.store.states.isAllSelected 判断所有父节点勾选状态,父节点全部勾选为 true

selectAll(selection) {
      // 1. 父节点全部选中
      if (this.$refs.multipleTable.store.states.isAllSelected) {
        this.$refs.multipleTable.data.map((items) => {
          items.isChecked = false;
          this.rowSelect(selection, items);
        });
      }
      // 2. 父节点没有全部选中
      else {
        this.$refs.multipleTable.data.map((items) => {
          items.isChecked = true;
          this.rowSelect(selection, items);
        });
      }
    },