公司组织机构管理中需要用到 element-uel-tree 组件,会对公司的结构进行添加或删除,el-tree 节点的加载方式有两种:一种是直接传入所有的节点信息,当然前提是先整理好上下级关系;另一种就是异步动态加载节点。

如果采用第一种方式因为所有数据都已经被加载,所以新增、编辑、删除节点后都可以在源数据上进行更改操作。而用异步加载的方式,新增,可以在新增成功后让后端返回新增节点的 id,然后通过组件提供的 appendinsertBeforeinsertAfter 直接追加节点,删除可以通过 remove 直接移除,但是如果是编辑的话,需要更新节点信息,而组件并没有提供这样的方法,如果重新加载整个树,那树又要从第一级重新展开。最后我想到的方法是模拟父节点重新加载:

1
2
3
4
5
6
7
8
refreshNode(id) {
// 先根据节点 id 获取到节点的父节点
const node = this.$refs.elTree.getNode(id)
// 将父节点的 loaded 设置为 false, 这样在展开父节点的时候,就会重新请求子节点
node.parent.loaded = false
// 展开父节点
node.parent.expand()
}

这样就完成了节点的更新,也不用重载整个树。