element-ui el-table 树形结构 父子级联动

el-table 表格

为 select 和 select-all 设置回调函数

<el-table :data="tableData" id="yc_load" ref="yc_load" height="500px" border default-expand-all
                row-key="showId" :tree-props="{children: 'children'}"
                @select="select"
                @select-all="selectAll">
        <el-table-column type="selection" width="50">el-table-column>
        <el-table-column label="姓名" :fixed="true" prop="showName" align="left" header-align="left" width="230">el-table-column>
el-table>
1
2
3
4
5
6
7

简要数据格式

tableData: [
	{showId: xxx,
	showName: xxx,
	children: [
		{showId:xxx,
		showName:xxx,
		parentId:xxx},
		{showId:xxx,
		showName:xxx,
		parentId:xxx}
	]},
	{showId: xxx,
	showName: xxx}
],
ids: []
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

单选

select(selection,row){
      let vm = this
      // 操作行 row 在 已选范围 selection 内，认为是选中，否则是取消选中 
      if(selection.some((el)=>row.showId===el.showId)){
      	// 设置当前行选中状态
        row.isChecked = true
        // 记录选中id 
        this.addId(row)
        // 若存在子级，自己全选
        if(row.children) {
          row.children.map(c => {
            this.$refs.yc_load.toggleRowSelection(c,true)
            c.isChecked = true
            this.addId(c)
          })
        }
        // 若存在父级，设置父级选中
        if(row.parentId){
          let pNode = vm.tableData.find(x => x.showId === row.parentId)
          this.$refs.yc_load.toggleRowSelection(pNode,true)
          pNode.isChecked = true
          this.addId(pNode)
        }
      } else {
        row.isChecked = false
        this.deleteId(row)
        // 若存在子级，子级全部取消选中
        if(row.children){
          row.children.map((i)=>{
            this.$refs.yc_load.toggleRowSelection(i,false)
            i.isChecked = false
            this.deleteId(i)
          })
        }
        // 若存在父级，判断父级的子级(当前行的兄弟) ，若全部未选中，取消父级选中
        if(row.parentId) {
          let pNode = vm.tableData.find(x => x.showId === row.parentId)
          if(!pNode.children.some(el => el.isChecked == true)) {
            this.$refs.yc_load.toggleRowSelection(pNode,false)
            pNode.isChecked = false
            this.deleteId(pNode)
          }
        }
      }
      console.log(this.ids)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

全选

selectAll(selection) {
	  // 判断当前是否有已选中的
      let rA = this.tableData.some(el => {
        let r = false
        if(el.children) {
          r = el.children.some(e => e.isChecked)
        }
        if(r) return r
        return el.isChecked
      })
      // 若有选中则全部取消，否则全部选中
      if(rA) {
        this.tableData.forEach(el => {
          el.isChecked = false
          this.$refs.yc_load.toggleRowSelection(el, false)
          this.deleteId(el)
          if(el.children) {
            el.children.forEach(e => {
              e.isChecked = false
              this.$refs.yc_load.toggleRowSelection(e, false)
              this.deleteId(e)
            })
          }
        })
      } else {
        this.tableData.forEach(el => {
          el.isChecked = true
          this.$refs.yc_load.toggleRowSelection(el, true)
          this.addId(el)
          if(el.children) {
            el.children.forEach(e => {
              e.isChecked = true
              this.$refs.yc_load.toggleRowSelection(e, true)
              this.addId(e)
            })
          }
        })
      }
      console.log(this.ids)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

操作 ids

	// 增加选中
    addId(o) {
      let id = o.showId
      if(this.ids.indexOf(id) < 0) {
        this.ids.push(id)
      }
    },
    // 删除选中
    deleteId(o) {
      let id = o.showId
      this.ids = this.ids.filter(item => item !== id);
    },
1
2
3
4
5
6
7
8
9
10
11
12

不再设置 selection-change 回调函数，直接监听ids

  // 监听ids
  watch: {
    ids: function (newVal, oldVal) {
      this.handleChange(newVal)
    }
  },
1
2
3
4
5
6

感谢 element-ui el-table 实现全选且父级子级联动 提供的思路
另附 el-table 文档