elementUI tree 懒加载 更新节点

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

先上一部分代码

html 部分

<el-tree
    :load="loadNode"
    lazy
    :props="props"
    ref="tree"
    node-key="id"
    :expand-on-click-node="false"
    style="margin-top: 10px;">

    <span slot-scope="{ node, data }">
        <span>{{ `课程：${node.label}` }}</span>
        <span style="margin-left: 100px; font-size: 14px;">
            <el-button
                type="text"
                size="mini"
                @click="() => editNode(node, data)">
                修改课程
            </el-button>
            <el-button
                v-if="node.level === 1"
                type="text"
                size="mini"
                @click="() => addNode(node, data)">
                新增课程
            </el-button>
            <el-button
                type="text"
                size="mini"
                style="color: #fd8076"
                @click="() => delTree(node, data)">
                删除课程
            </el-button>
        </span>
    </span>
</el-tree>

加载数据的方法

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)
},

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