el-tree懒加载函数的手动触发和数据回显_el-tree懒加载数据回显-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43238931/article/details/125272449

本文探讨了在el-tree组件中如何手动触发懒加载函数loadNode，尤其是在已有数据需要回显的情况下。通过Node.expand()方法和default-expanded-keys属性两种方式可以安全地手动触发懒加载。同时，文章介绍了在loadNode方法内部实现数据回显的策略，避免因初次加载未获取数据而影响回显效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-tree官方示例的loadNode方法有两个入参，第一个参数Node，第二个参数resolve，想要数据回显就必须同时传入这两个参数，在已知需要回显数据的pid情况下（即已知Node），需要再传入resolve才能手动调用loadNode来回显数据。
参考了这篇文章手动触发懒加载load函数的三种方法在方法一中可以调用expand方法展开节点（这个方法在文档中并没有，可能是源码中的），另外自己尝试使用了default-expanded-keys发现也可以展开节点实现懒加载函数的手动触发。

手动触发

本人认为比较安全的手动触发方式有两种

通过id获取到Node，调用Node.expand()展开节点
给default-expanded-keys传入默认展开节点的id，懒加载函数会自动触发

数据回显

回显要写在loadNode方法里，下面回显判断中加了nodes.length > 0是为了防止第一次懒加载时没有加载到数据，导致isFirstTime被置为false无法回显

async loadNode({ data: node }, resolve) {
  if (node.type === '1') return resolve([])
  const nodes = []
  await getChildData().then((data) => {
  	// ...获取nodes
  })
  resolve(nodes)
  if (nodes.length > 0 && this.isFirstTime) {
    const id = this.params.nodeInfo.data.VCLID
    const compNode = this.$refs.tree.getNode(id)
    this.$refs.tree.setCurrentKey(id)
    if (compNode) this.treeNodeSelect(compNode.data)
    this.isFirstTime = false
  }
},