el-tree 懒加载树的回显

感谢这个 帖子 的作者，给我提供了灵感来源

---

先看效果：

---

业务情景：

点击左侧的方框后，会向后端发送请求，后端返回给前端一个字符串，前端再根据这个字符串，进行树级结构的回显。
例如上图中，点击 “2” 的时候没有反应，这是因为 “2” 对应的字符串为空；
点击 “3” 的时候，前端接收到的字符串为 “/Windows/二级/三级/tb_app_registration.xlsx” ，右侧就会出现这个字符串对应的树，并设置 “tb_app_registration.xlsx” 文件为选中状态；
“4”、“5” 同理，“4” 的字符串为 “/Windows/二级/三级/tb_关键字.xlsx”，“5” 的字符串为空。
注：关于树的懒加载，本人写过一个示例，本篇文章中可能会出现示例中的内容，如果只是单纯想实现懒加载树，推荐去看示例。

---

具体实现：

HTML 代码：

<el-tree
  ref="tree"
  lazy
  :props="props"
  :load="loadNode"
  node-key="label"
  highlight-current
  @node-click="handleNodeClick">
  <!--
  	template 标签内的内容是节点前面的自定义图标，
  	如果不需要自定义图标，整个 template 标签直接全部删掉即可 
  -->
  <template #default="{ node }">
    <span style="font-size: 14px">
      <img 
        v-if="node.data.nodeType === 'folder'"
        class="treeLogo"
        src="@/views/dataImport/assets/png/folderLogo.png">&nbsp;&nbsp;
      <img 
        v-else-if="node.data.nodeType === 'csv'" 
        class="treeLogo"
        src="@/views/dataImport/assets/png/csvLogo.png">&nbsp;&nbsp;
      <img 
        v-else
        class="treeLogo"
        src="@/views/dataImport/assets/png/excelLogo.png">&nbsp;&nbsp;
      <span>{{ node.label }}</span>
    </span>
  </template>
</el-tree>

script 标签内的内容：

data() {
  return {
  	...
    querySql: "", // 存储后端返回给我的字符串
	
    node: null, // 存储当前被选中的节点
    
    labelArr: [],  // 处理返回的字符时，将结果保存到这里
    
    // 树的结构配置
    props: {
      label: 'label',
      children: 'children',
      isLeaf: 'isLeaf',
      nodeType: 'nodeType',
    },
    ...
  }
},

props: [
  ...
  "data",
  ...
],

watch: {
  data: {
    handler(newVal, oldVal) {
      // 当 data 发生变化时，也就是切换动图演示中的左侧方框时，调用这个函数
      this.echoTree()
    },
    deep: true,
  },
  
  node: {
    handler(newVal) {
      // 遍历子节点，找到对应的节点，将其作为下一个 this.node，
      // 然后 this.node 发生改变，又会触发监听，形成递归
      if (newVal === null) return
      newVal.childNodes.forEach(child => {
        let nextNodeIndex = this.labelArr.indexOf(child.data.label)
        if (nextNodeIndex !== -1) {
          this.node = this.$refs.tree.getNode(this.labelArr[nextNodeIndex])
          if (this.node.level > this.labelArr.length-1) {
             this.$refs.tree.setCurrentKey(this.node.data.label)
             return
           }
          this.node.expand()
        }
      })
    },
    deep: true
  },
},

methods: {
  echoTree() {
    // 处理后端给的字符串
    this.labelArr = this.querySql.split("/")
    // 这里可以自定义设置根节点名称，例如 this.rootName
    this.labelArr[0] = "根节点名称"
	// 因为 el-tree 设置了 node-key="label"，所以这里可以通过节点名称，直接获取节点，
	// 然后将获取到的节点保存起来，此时 node 从 null 变成一个有值的数据，就会触发监听
    this.node = this.$refs.tree.getNode(this.labelArr[0])
    // 并且展开这个节点
    this.node.expand()
  },

  async loadNode(node, resolve) {
    if (this.appItem.driveType !== "ftp") return
    
    this.node = node
    // 当页面渲染时，el-tree 的 :load 属性会自动调用本函数，
    // 此时的 node.level 就是 0，这时候需要返回当前应用的名称作为树结构的根目录名称
    if (node.level === 0) {
      // return resolve()  
      // 括号内的内容即为需要渲染的子节点，只需要将子节点数据放入括号内返回即可
      return resolve([
        {
          // 这个也是自定义的
          label: "根节点名称",
          nodeType: "folder",
          // 同时还需要给节点设置 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,
          nodeType: "folder",
          fileFullName: folder.fileFullName
        }
        children.push(data)
      })
      res.data.fileList.forEach(file => {
        let data = {
          label: file.fileName,
          isLeaf: true,
          nodeType: file.fileName.split(".")[1],
          fileFullName: file.fileFullName
        } 
        children.push(data)
      })
      return resolve(children)
    }
  },
}

注：

代码量有点大，但慢慢看应该也好懂，主要是看个思路，核心代码也就那几行；

这篇文章是功能实现几天之后才总结的，因此代码会有增减，我大概看了一下，应该没有漏掉什么核心代码，如果遇到“变量没定义但是使用了”之类的问题，可以留言，我看到了就会来改的。