el-table树形结构复选框递归选中所有下属节点; 取消某个子节点的状态所有祖先节点都会取消选中状态。
<template>
<el-scrollbar style="height: 100%">
<el-table
ref="table"
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id" border
:select-on-indeterminate="false"
@select="select"
@select-all="selectAll"
default-expand-all
:tree-props="{children: 'children'}">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</el-scrollbar>
</template>
<script>
import {getJsonParents} from "@/utils/index.js";
export default {
data() {
return {
tableData: [{
id: 1,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 31,
date: '2016-05-31',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 38,
date: '2016-05-31',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 39,
date: '2016-05-32',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 32,
date: '2016-05-32',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 4,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
}
},
methods: {
select (selection, row) {
if (selection.some(el => { return row.id === el.id })) {
console.log(selection)
this.childrenRecursiveChange(row, true);
} else {
this.childrenRecursiveChange(row, false);
this.parentsRecursiveChange(selection, row, false);
// if (row.children) {
// row.children.map(j => {
// this.toggleSelection(j, false)
// })
// }
// let parentIds = getJsonParents(this.tableData, row.id);
// selection.map(el => {
// if (el.id == parentIds[parentIds.length - 1]) {
// this.toggleSelection(el, false);
// }
// })
}
},
childrenRecursiveChange (row, status) {
if (row.children) {
row.children.map(j => {
this.toggleSelection(j, status)
if (j.children) this.childrenRecursiveChange(j, status)
})
}
},
parentsRecursiveChange (selection, row, status) {
let parentIds = getJsonParents(this.tableData, row.id);
if (parentIds && parentIds.length) {
selection.map(el => {
if (parentIds.includes(el.id)) {
this.toggleSelection(el, status);
}
})
}
},
selectAll (selection) {
// tabledata第一层只要有在selection里面就是全选
const isSelect = selection.some(el => {
const tableDataIds = this.tableData.map(j => j.id)
return tableDataIds.includes(el.id)
})
// tableDate第一层只要有不在selection里面就是全不选
const isCancel = !this.tableData.every(el => {
const selectIds = selection.map(j => j.id)
return selectIds.includes(el.id)
})
if (isSelect) {
selection.map(el => {
this.childrenRecursiveChange(el, true)
// if (el.children) {
// el.children.map(j => {
// this.toggleSelection(j, true)
// })
// }
})
}
if (isCancel) {
this.tableData.map(el => {
this.childrenRecursiveChange(el, false)
// if (el.children) {
// el.children.map(j => {
// this.toggleSelection(j, false)
// })
// }
})
}
},
toggleSelection (row, select) {
if (row) {
this.$nextTick(() => {
this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
})
}
},
cancelAll () {
this.$refs.table.clearSelection()
},
}
}
</script>
里面会有递归方法，主要是通过子结点id获取所有祖先节点的id, 如下: （如果你的节点名称不是children字段，记得换下下面的children）
function findParentNodeId(jsonData, nodeId){
let result;
if (!jsonData || !jsonData.children) {
return result;
}
for (let i = 0; i < jsonData.children.length; i++) {
let item = jsonData.children[i];
if (item.id == nodeId) {
result=jsonData.id;
return result;
} else if (item.children && item.children.length > 0) {
result= findParentNodeId(item, nodeId);
if(result){
return result;
}
}
}
return result;
}
/**
* 最终形态
*/
export function getJsonParents (array, nodeId) {
let str = []
if (!array || array.length == 0) return null;
for (let i=0; i<array.length; i++) {
let parentId = findParentNodeId(array[i], nodeId);
if (!parentId) continue
else {
handler(array[i], nodeId);
}
return str
}
function handler (json, nodeId) {
let parentId = findParentNodeId(json, nodeId);
if (parentId){
str.unshift(parentId)
handler(json, parentId)
} else {
return
}
}
}
如果只是关联tree的上下一級，可以查看https://juejin.cn/post/6844904114141265933
