Element-ui el-table 树形表格多选

Element-ui el-table 树形表格多选

1. 关键方法 toggleRowSelection(row,flag) @select="rowSelect"(行选中) @select-all="selectAll"(全选)
2. 页面代码

    <el-table
      :data="dataList"
      ref="tableRef"
      highlight-current-row
      v-loading="loading"
      style="width: 100%;"
      size="small"
      row-key="id"
      @selection-change="selsChange"
      @select="rowSelect"
      @select-all="selectAll"
      :tree-props="{children: 'children', hasChildren: 'children.length>0'}"
    >
      >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="menuName" label="菜单名称" sortable></el-table-column>
      <el-table-column prop="menuDes" label="菜单描述" sortable></el-table-column>
      <el-table-column prop="menuIcon" label="导航图标" sortable>
        <template slot-scope="scope">
          <i :class="scope.row.menuIcon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="menuPath" label="导航路径" sortable></el-table-column>
      <el-table-column prop="menuComponent" label="Vue文件路径" sortable></el-table-column>
      <el-table-column prop="menuLeaf" label="是否单节点" sortable>
        <template slot-scope="scope">{{scope.row.menuLeaf === 1?'是':'否'}}</template>
      </el-table-column>
      <el-table-column prop="menuHidden" label="是否隐藏" sortable>
        <template slot-scope="scope">{{scope.row.menuHidden === 1?'是':'否'}}</template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-show="scope.row.menuStatus == 1" effect="dark" size="medium">正常</el-tag>
          <el-tag type="danger" v-show="scope.row.menuStatus == 2" effect="dark" size="medium">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            @click="changeMenuStatus(scope.row)"
            v-if="scope.row.menuStatus == 1"
          >禁用</el-button>
          <el-button
            type="success"
            size="small"
            @click="changeMenuStatus(scope.row)"
            v-if="scope.row.menuStatus == 2"
          >启用</el-button>
          <el-button type="primary" size="small" @click="toUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

3. js代码

    toggleSelection(rows, flag) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.tableRef.toggleRowSelection(row, flag);
        });
      } else {
        this.$refs.tableRef.clearSelection();
      }
    },
    rowSelect(selection, row) {
      if (selection.indexOf(row) > -1 && row.menuLevel === 1) {
        this.toggleSelection(row.children, true);
      }
      if (selection.indexOf(row) === -1 && row.menuLevel === 1) {
        this.toggleSelection(row.children, false);
      }
      if (selection.indexOf(row) > -1 && row.menuLevel === 2) {
        let s = this.dataList.filter(item => {
          if (item.id === row.menuPid) {
            return item;
          }
        });
        this.toggleSelection(s, true);
      }
    },
    selectAll(selection) {
      var flag = false; // 默认 为全不选
      selection.forEach(item => {
        if (item.menuLevel === 1) {
          flag = true;
          this.toggleSelection(item.children, true);
        }
      });
      if (!flag) {
        this.toggleSelection();
      }
    },

4. 目前能实现我想要的结果,可能跟你们需求不太一致,可自行修改
   效果如下: