el-tree 的懒加载

先看效果：

---

结构如下：

<el-tree
  ref="tree"
  lazy
  :props="props"
  :load="loadNode"
  node-key="label"
  highlight-current
  @node-click="handleNodeClick">
</el-tree>

---

script 标签内的数据：

data() {
  return {
    ...
    // 树的结构配置
    props: {
      label: 'label',
      children: 'children',
      isLeaf: 'isLeaf'
    },
  }
},
...
methods: {
	handleNodeClick(data, node) {
      // 这里的内容怎么写，要根据实际需求
      console.log(data)
      console.log(node)
    },

	// 重点是这个函数 👇
	// 当页面渲染时，el-tree 的 :load 属性会自动调用本函数（这句话是我自己猜测的，不确定）
	async loadNode(node, resolve) {
	
      // 初始的 node.level 就是 0，这时候返回的内容就需要自己定义
      if (node.level === 0) {
        // return resolve()  
        return resolve([
          {
          	// 可以根据业务需要，在这里动态设置根节点的名称，如：this.rootName
            label: "根节点",
            // 这里本人给节点设置了 fileFullName 属性，以便发送请求时使用
            fileFullName: "/",
          }
        ])
      }

      // 当用户手动点击节点时，node.level 就都是大于等于 1 的了 
      if (node.level >= 1) {
        // 发送请求，获取子节点的数据
        let res = await loadFtpFileSystemApi({
          appId: this.appItem.id,
          fullPath: node.data.fileFullName,
        })
        // 处理请求到的数据
        let children = []
        res.data.directoryList.forEach(folder => {
          let data = {
            label: folder.fileName,
            // 标记是否为叶子节点，这个也是看实际的后端返回的数据
            isLeaf: false,
            fileFullName: folder.fileFullName
          }
          children.push(data)
        })
        res.data.fileList.forEach(file => {
          let data = {
            label: file.fileName,
            isLeaf: true,
            fileFullName: file.fileFullName
          } 
          children.push(data)
        })
        // 括号内的内容即为需要渲染的子节点，只需要将子节点数据放入括号内返回即可
        return resolve(children)
      }
    },
}