2021-09-06 el-tree 懒加载load 手动触发load更新的三种方法

      <el-tree
        ref="tree"
        :props="{ children: 'child', label: 'deptName', isLeaf: 'leaf' }"
        node-key="sysDeptId"
        :expand-on-click-node="true"
        :load="loadNode"
        lazy
        @node-click="handleNodeClick"
      />

有这个懒加载并且刷新需求的老铁肯定涉及到了节点中子节点数据的增删改!!!

方法1

推荐,此方法有效避免直接调用loadNode(node, resolve)函数,可以间接从组件内部触发load事件,这样就不需要缓存resolve这个不好拿到的入参。省去后续很多麻烦事,特别是由于懒加载只加载一次导致缓存的数据和方法不匹配当前点击的节点,从而导致增删改树结构数据时显示异常的问题,方法2中有详细说明。

// 刷新某个树节点,重点!!!!
refreshNode(key) {
    // 获取当前节点,key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.key
    let node = this.$refs.tree.getNode(key);
    //  设置未进行懒加载状态
    node.loaded = false;
    // 重新展开节点就会间接重新触发load达到刷新效果
    node.expand();
 },

方法2

可以在第一次懒加载数据的时候,把 loadNode 的 2 个参数保存下来,然后添加节点的时候,重新调用一下这个方法就可以了

不推荐,由于loadNode只会针对某个节点加载一次,后续再点击你点过的这个节点的小箭头不会再次触发loadNode,这容易让缓存的两个数据this.node和this.resolve与当前点击节点不匹配(比如你点击了未懒加载过的小箭头,再去点已经懒加载过的其他小箭头或者节点,这时候由于已懒加载的不会再触发loadNode函数,而你缓存的this.node和this.resolve却是上一次的,这种情况下如果你在当前点击的节点对子节点进行增删改请求后去手动调用loadNode传入this.node和this.resolve刷新树节点,由于传入的数据都是上一次的,那么就会出现你请求的新的树节点数据跑到上一次触发懒加载缓存的节点去的情况,这时树结构的数据就显示异常了)

// 节点懒加载事件
loadNode (node, resolve) {
    // loadNode 的 2 个参数保存下来方便下次手动调用传入
    this.node = node
    this.resolve = resolve
    // 你的请求逻辑
    ...
    ...
},
refreshNode () {
    this.node.childNodes = [] // 这里把子节点清空,是因为再次调用 loadNode 的时候会往 childNodes 里 push 节点,所以会有节点重复的情况。
    // 把刚刚存的两个变量手动传入调用
    this.loadNode(this.node, this.resolve)
},

解决办法:繁琐容易出错,做过各种尝试都不太理想,不再深究。

方法3

可使用官方提供的 append 方法,代码如下,nodeData 就是你新增的数据。但是这种方法有一个问题,这只是前台在添加完成后(接口返回成功),伪造的一条数据,目的只是让用户看到添加成功了一条数据,并没有重新请求接口并刷新所有的节点。

不推荐,如果新增成功以后,不做任何操作(不刷新页面),去删除此节点,会发现此节点没有 ID ,删除不了,也就是说添加成功后我们前端没有拿到属于该节点的 ID ,所以没法删除。

添加节点方法

addNode (node, data) {
    const nodeData = {name: '新增节点'}
    this.$refs.tree.append(nodeData, node)
}

解决办法:可以与后台协商,在添加成功对接口里返回该节点对 ID,然后 append 节点的时候,把此节点的 ID 也添加进去,就 OK 了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容