前提：前端拿到树结构的全量数据，前端自己做懒加载。
需求：编辑时需要默认展开到原来选中的那一项。
6000多条数据不做懒加载之前卡到页面点都点不动，前端做了懒加载之后很流畅，这里主要记录下要默认展开某一项时的坑，
懒加载过程不做描述，代码如下，很好理解：
<el-table
ref="multipleTable"
:data="branchList"
:row-key="getRowKey"
:expand-row-keys="getExpendKeys()"
border
lazy
:load="loadChild"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<!--列表内容-->
</el-table>
获取全量数据：
this.branchListCopy = allData //这里allData表示从后端接口获取到的树结构全量数据
//处理第一层级数据children为null
this.branchList = JSON.parse(JSON.stringify(this.branchListCopy)).map(item => {
// hasChildren 表示需要展示一个箭头图标
item.hasChildren = item.children && item.children.length > 0
item.idList = [item.id]
item.children = null
return item
})
点击加载子节点：
loadChild(tree, treeNode, resolve){
// 层级关系备份
const idCopy = JSON.parse(JSON.stringify(tree.idList))
// 查找下一层数据
let resolveArr = this.branchListCopy
let id
//找到最后一层children
while (id= tree.idList.shift()) {
const tarItem = resolveArr.find(item => item.id=== id)
tarItem.loadedChildren = true
resolveArr = tarItem.children
}
// 处理下一层数据的属性
resolveArr = JSON.parse(JSON.stringify(resolveArr))
resolveArr.forEach(item => {
item.hasChildren = item.children && item.children.length > 0
item.children = null
// 此处深拷贝，以防各个item的idList混乱
item.idList = JSON.parse(JSON.stringify(idCopy))
item.idList.push(item.id)
})
// 标识已经加载子节点
tree.loadedChildren = true
// 渲染子节点
resolve(resolveArr)
},
注意上面会设置一个hasChildren的属性，表示如果该节点下有子节点，添加可展开的小箭头。
当拿到需要默认展开的层级id数组时，修改一下初始化branchList的地方：
let selectIdList = 层级id数组
const mapChid = (list, idList) => {
list?.map((item) => {
item.hasChildren = item.children && item.children.length > 0
let idCopy = JSON.parse(JSON.stringify(idList)) || []
idCopy.push(item.orgId)
this.$set(item, 'idList', idCopy)
//判断节点id是否存在于需要默认展开的层级id数组内，不存在表示不用展开，children设置为null
if (!(selectIdList?.length && selectIdList.includes(String(item.id)))){
item.children = null
}
else if(item?.children?.length > 0){
//如果存在于层级id数组内，继续遍历处理下一级children
item.children = mapChid(item.children, item.idList);
//！！！！！！！！！！！！！！！！！！！
item.hasChildren = false //！！！！！！请注意此处的hasChildren
}
return item
})
return list
}
this.branchList = JSON.parse(JSON.stringify(this.branchListCopy)).map(item => {
// hasChildren 表示需要展示一个箭头图标
item.hasChildren = item.children && item.children.length > 0
item.idList = [item.orgId]
// item.children = null
item.children = mapChid(item.children, item.idList)
if(selectIdList?.length && selectIdList.includes(String(item.id))){
//！！！！！！！！！！！！！！！！！！！！
item.hasChildren = false //默认要展开的节点hasChildren不能设置为true
}
return item
})
注意上面打了两排感叹号的地方，如果要默认展开的节点，hasChildren不能设置为true！
就是被这里坑了好久！！！！
也不知道是怎么被我试出来的，本来不想贴代码，为了引出最后这一点想想还是贴了比较好理解，所以有点乱，如果懒加载那一块有问题，欢迎评论一起讨论。
