需求

el-tree 刷新后默认折叠全部节点，默认选中第一个节点（以下简称 默认设置）。

现在需求是：新增或编辑节点数据，要求刷新后保持展开状态和选中节点不变。

思路

1. 思路一：只在第一次进入页面时的刷新，采用 默认设置，其他时候的刷新，不改变展开和选中节点；


2. 思路二： 刷新都采用 默认设置，其他时候的刷新，看之前有没有选中和展开的节点，若有则保持它们不变，否则采用 默认设置。

分析

思路一：第一次进入页面时 不容易判断；

思路二：看之前有没有选中和展开的节点，需要把数据保存起来。

情况一：仅在新增或修改节点数据时，要求刷新后状态不变。那么就不需要用到本地存储 LocalStorage 或者 COOKIEs;

情况二：若要求任何时候的刷新，只要之前有展开节点或选中节点，刷新后状态都不变，那么就要用到本地存储。

在这里适用于情况一。

解决办法

第一步：刷新后节点的展开状态不变

el-tree 中有两个方法：

其中的 expandedList 可以在 data 中声明为空数组，如果需要接收祖先组件 prop 传值，也可以设置在计算属性中。

// methods 中
/* 节点展开触发 */
handleNodeExpand(data, node) {
// 保存当前展开的节点
let flag = false
this.expandedList.some(ele => {
if(ele === data[this.nodeKey]) {
// 判断当前节点是否存在，存在则不做处理
flag = true
return true
}
})
if (!flag) {
// 不存在则存到数组中
this.expandedList.push(data[this.nodeKey])
}
},
/* 节点缩起触发 */
handleNodeCollapse(data, node) {
console.log('节点缩起触发:', {data}, {node})
// 删除当前缩起的节点及其子节点
this.expandedList.some((ele, index) => {
if (ele === data[this.nodeKey]) {
// 数组扁平化 this.extractTree() 为封装的公共方法
const flatChildren = this.extractTree(data, 'children')
flatChildren.forEach(ele => {
const index = this.expandedList.indexOf(ele)
if (index !== -1) {
this.expandedList.splice(index, 1)
}
})
}
})
}


注意：参考链接 保留展开状态：element el-tree树结构刷新后保留展开状态解决方法 中，点击父节点需要点两次才能折叠。原因是：删除当前关闭的节点时，父节点虽然删掉了，但其后代节点还没来得及删，因此第一次点击折叠无效。

// 树节点关闭
handleNodeCollapse(data) {
// 删除当前关闭的节点
this.defaultExpandIds.some((item, i) => {
if (item === data.id) {
this.defaultExpandIds.splice(i, 1)
}
})
this.removeChildrenIds(data) // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
},
// 删除树子节点
removeChildrenIds(data) {
const ts = this
if (data.children) {
data.children.forEach(function(item) {
const index = ts.defaultExpandIds.indexOf(item.id)
if (index > 0) {
ts.defaultExpandIds.splice(index, 1)
}
ts.removeChildrenIds(item)
})
}
},
————————————————
版权声明：本文为CSDN博主「苜可」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43555948/article/details/119642353


第二步：刷新后选中的节点不变

参考链接

1. 保留展开状态：element el-tree树结构刷新后保留展开状态解决方法

   
   



2. 本地存储：vue项目中使用element UI中的el-tree刷新后保持节点展开状态