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) {
    // 这里是由于1、二级的节点请求的接口不同，因此作一些处理，不用管这个
    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)
},

这样就能够主动刷新节点数据了。若是有更好的办法或者哪些地方不正确，但愿你们指正，谢谢。