matlab uitree update,elementUI tree 懒加载 更新节点

最近在项目中用到了 elementUI 的懒加载 tree 组件，因为项目里有新增、修改、删除节点的功能，使用了以后发现不能主动更新 tree 的数据，查阅资料，发现找不到解决的方案，最后尝试了 N 多种方法，最后终于搞定了。

先上一部分代码

html 部分

:load="loadNode"

lazy

:props="props"

ref="tree"

node-key="id"

:expand-on-click-node="false"

style="margin-top: 10px;">

{{ `课程：${node.label}` }}

type="text"

size="mini"

@click="() => editNode(node, data)">

修改课程

v-if="node.level === 1"

type="text"

size="mini"

@click="() => addNode(node, data)">

新增课程

type="text"

size="mini"

style="color: #fd8076"

@click="() => delTree(node, data)">

删除课程

加载数据的方法

loadNode (node, resolve) {

// 这里是因为一、二级的节点请求的接口不一样，所以做一些处理，不用管这个

const url = node.level === 0 ? this.treeUrlHash[node.level] : `${this.treeUrlHash[node.level]}/${node.data.id}`

this.$http('get', url)

.then(res => {

if (res.code === '200') {

resolve(res.data)

}

})

}

下面我用新增节点来说明：

第一种解决方案，可使用官方提供的 append 方法，代码如下，nodeData 就是你新增的数据。但是这种方法有一个问题，这只是前台在添加完成后(接口返回成功)，伪造的一条数据，目的只是让用户看到添加成功了一条数据，并没有重新请求接口并刷新所有的节点。问题来了，如果新增成功以后，不做任何操作(不刷新页面)，去删除此节点，会发现此节点没有 ID ，删除不了，也就是说添加成功后我们前端没有拿到属于该节点的 ID ，所以没法删除。

添加节点方法

addNode (node, data) {

const nodeData = {name: '新增节点'}

this.$refs.tree.append(nodeData, node)

},

那么怎么处理呢，可以与后台协商，在添加成功对接口里返回该节点对 ID，然后 append 节点的时候，把此节点的 ID 也添加进去，就 OK 了。

第二种解决方案：可以在第一次加载数据的时候，把 loadNode 的 2 个参数保存下来，然后添加节点的时候，重新调用一下这个方法就可以了。下面是代码：

加载数据的方法

loadNode (node, resolve) {

// isFirst 为了保证只在第一次加载的时候进行

if (this.isFirst) {

this.node = node

this.resolve = resolve

this.isFirst = false

}

// 这里是因为 1 2 级的节点请求的接口不一样，所以做一些处理

const url = node.level === 0 ? this.treeUrlHash[node.level] : `${this.treeUrlHash[node.level]}/${node.data.id}`

this.$http('get', url)

.then(res => {

if (res.code === '200') {

resolve(res.data)

}

})

}

添加节点方法

addNode (node, data) {

this.node.childNodes = [] // 这里把子节点清空，是因为再次调用 loadNode 的时候会往 childNodes 里 push 节点，所以会有节点重复的情况。

this.loadNode(this.node, this.resolve)

},

这样就可以主动刷新节点数据了。如果有更好的办法或者哪些地方不正确，希望大家指正，谢谢。