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

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

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

    
      >
      
      
      
      
        
      
      
      
      
        
      
      
        
      
      
        
      
      
        
      
    

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. 目前能实现我想要的结果,可能跟你们需求不太一致,可自行修改
   效果如下: