el-tree树节点新增、编辑、删除后局部刷新树

前言

场景：左侧为树，右侧为树的增删改配置，右侧增删改操作之后想要实现左侧树节点的局部刷新，保证用户的体验效果。 (u‿ฺu✿ฺ)

一、新增节点

el-tree的updateKeyChildren(key, data) 方法，通过 keys 设置节点子元素。1. 节点 key 2. 增加的子元素数组（这个新增的数据最好由后端在新增接口返回，前端直接新增的话节点没有对应生成的id）

let { updateKeyChildren } = this.$refs.Tree
updateKeyChildren(key, '增加的子元素数组');

二、删除节点

获取需要删除的节点数据集合，遍历，通过el-tree的remove(data)，删除对应的子元素；

如果只能获取到节点keys集合，可以用过getNode(key)方法获取node，再通过remove(node)，删除对应的子元素。

let { remove } = this.$refs.Tree
let dataArr = '需要删除的节点数据集合'
dataArr.forEach((item: any) => {
  remove(item)
})
let keyArr = '需要删除的节点key集合'
keyArr.forEach((item: Number) => {
  remove(getNode(item))
})

三、编辑节点

编辑节点采用先删除对应节点，再新增修改后的节点，太麻烦了

四、其余方式

直接更新父节点---使用后发现有bug，不用让后端帮忙返回数据。

el-tree的load(node, resolve)方法，node为需要重新加载的节点，resolve函数是用来渲染树组件，resolve参数需要存储一下，resolve参数可能不对应，节点重新渲染会渲染成上一个点击的节点

let node = '需要更新的节点node'
this.treeLoad(node, this.resolve)

treeLoad(node: any, resolve: any){
    // 存储一下resolve参数
    this.resolve = resolve
}

最后采用了下面的方法，重新展开node节点，实现调用load加载方法 ╮（╯＿╰）╭

node.loaded = false
node.expand();