<el-tree
ref="tree"
:props="{ children: 'child', label: 'deptName', isLeaf: 'leaf' }"
node-key="sysDeptId"
:expand-on-click-node="true"
:load="loadNode"
lazy
@node-click="handleNodeClick"
/>
有这个懒加载并且刷新需求的老铁肯定涉及到了节点中子节点数据的增删改!!!
方法1
推荐,此方法有效避免直接调用loadNode(node, resolve)函数,可以间接从组件内部触发load事件,这样就不需要缓存resolve这个不好拿到的入参。省去后续很多麻烦事,特别是由于懒加载只加载一次导致缓存的数据和方法不匹配当前点击的节点,从而导致增删改树结构数据时显示异常的问题,方法2中有详细说明。
// 刷新某个树节点,重点!!!!
refreshNode(key) {
// 获取当前节点,key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.key
let node = this.$refs.tree.getNode(key);
// 设置未进行懒加载状态
node.loaded = false;
// 重新展开节点就会间接重新触发load达到刷新效果
node.expand();
},
方法2
可以在第一次懒加载数据的时候,把 loadNode 的 2 个参数保存下来,然后添加节点的时候,重新调用一下这个方法就可以了
不推荐,由于loadNode只会针对某个节点加载一次,后续再点击你点过的这个节点的小箭头不会再次触发loadNode,这容易让缓存的两个数据this.node和this.resolve与当前点击节点不匹配(比如你点击了未懒加载过的小箭头,再去点已经懒加载过的其他小箭头或者节点,这时候由于已懒加载的不会再触发loadNode函数,而你缓存的this.node和this.resolve却是上一次的,这种情况下如果你在当前点击的节点对子节点进行增删改请求后去手动调用loadNode传入this.node和this.resolve刷新树节点,由于传入的数据都是上一次的,那么就会出现你请求的新的树节点数据跑到上一次触发懒加载缓存的节点去的情况,这时树结构的数据就显示异常了)
// 节点懒加载事件
loadNode (node, resolve) {
// loadNode 的 2 个参数保存下来方便下次手动调用传入
this.node = node
this.resolve = resolve
// 你的请求逻辑
...
...
},
refreshNode () {
this.node.childNodes = [] // 这里把子节点清空,是因为再次调用 loadNode 的时候会往 childNodes 里 push 节点,所以会有节点重复的情况。
// 把刚刚存的两个变量手动传入调用
this.loadNode(this.node, this.resolve)
},
解决办法:繁琐容易出错,做过各种尝试都不太理想,不再深究。
方法3
可使用官方提供的 append 方法,代码如下,nodeData 就是你新增的数据。但是这种方法有一个问题,这只是前台在添加完成后(接口返回成功),伪造的一条数据,目的只是让用户看到添加成功了一条数据,并没有重新请求接口并刷新所有的节点。
不推荐,如果新增成功以后,不做任何操作(不刷新页面),去删除此节点,会发现此节点没有 ID ,删除不了,也就是说添加成功后我们前端没有拿到属于该节点的 ID ,所以没法删除。
添加节点方法
addNode (node, data) {
const nodeData = {name: '新增节点'}
this.$refs.tree.append(nodeData, node)
}
解决办法:可以与后台协商,在添加成功对接口里返回该节点对 ID,然后 append 节点的时候,把此节点的 ID 也添加进去,就 OK 了。