若依-树表

发表于2021-06-16更新于2021-06-24字数统计405阅读时长4分

树表效果

树表

具体实现

表单部分

1
2
3
4
5
6
7
<el-table
  :data="businessplanList"
  row-key="id"
  ref="tableBusiness"
  default-expand-all
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>

row-key：指定行的id

default-expand-all：默认展开

:tree-props：这个字段一般就这么写

js代码

1
this.businessplanList = this.handleTree(response.rows, "id", "parentId");

树表的多选

树表多选

全选的代码

表单部分
1
2
3
4
5
6
7
8
<el-table 
  :data="businessplanList"
  row-key="id"
  ref="tableBusiness"
  default-expand-all
  @select-all="selectAll"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>

@select-all="selectAll"

js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
method: {
  selectAll(selection) {
    let flag = false; // 默认 为全不选
    selection.forEach(item => {
      if (item.parentId === 0) {
        flag = true;
        this.toggleSelection(item.children, true);
      }
    });
    if (!flag) {
      this.toggleSelection();
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
method: {
  toggleSelection(rows, flag) {
    if (rows) {
      rows.forEach(row => {
        this.$refs.tableBusiness.toggleRowSelection(row, flag);
      });
    } else {
      this.$refs.tableBusiness.clearSelection();
    }
  },
}

选中父节点自动选中子节点

表单部分
1
2
3
4
5
6
7
8
9
<el-table 
  :data="businessplanList"
  row-key="id"
  ref="tableBusiness"
  default-expand-all
  @select="rowSelect"
  @select-all="selectAll"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>

@select="rowSelect"

js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
method: {
  rowSelect(selection, row) {
    // 选中并且为父节点
    if (selection.indexOf(row) > -1 && row.parentId === 0) {
      this.toggleSelection(row.children, true);
    }
      
    // 取消选中并且为父节点
    if (selection.indexOf(row) === -1 && row.parentId === 0) {
      this.toggleSelection(row.children, false);
    }
      
    // 取消选中并且不为父节点
    // if (selection.indexOf(row) === -1 && row.parentId !== 0) {
    //   this.msgSuccess(this.$refs.tree.getHalfCheckedKeys())
    // }
      
    // 选中并且不为父节点
    if (selection.indexOf(row) > -1 && row.parentId !== 0) {
      this.toggleSelection(row, true);
    }
  },
}