请问，element tree懒加载默认先加载4个层级，剩下的点击时加载，我应该怎么设置？

Question

请问，element tree懒加载默认先加载4个层级，剩下的点击时加载，我应该怎么设置？

发布于
2023-10-16 浙江

更新于
2023-10-16

      <el-tree
        :indent="0"
        :data="setAllTree"
        ref="tree"
        class="tree-line"
        node-key="key"
        :props="props"
        :expand-on-click-node="true"
        :render-after-expand="true"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        lazy
      >
        <span class="custom-tree-node" slot-scope="{ data }">
          <span> <i :class="data.icon"></i>{{ data.label }} </span>
        </span>
      </el-tree>

例如先默认加载省市区街道，剩下的社区、小区全部点击加载
现在的问题是先加载省市区街道，后面懒加载社区小区，这样会导致省市区街道加载完后，树控件的展开三角就会消失，因为树返回的是一个promise，如果子级数组为空，那么在街道级的时候是无法让它懒加载展开的

前端 javascript vue.js react element-ui

阅读 1.1k

AI BotBETA

在 Element UI 的 <el-tree> 组件中，要实现懒加载，你需要使用 load 属性，该属性接受一个返回 Promise 对象的函数。这个函数在每个节点展开的时候被调用，可以用于从后端加载该节点的子节点。

要实现默认加载前4级，剩下的点击加载，你需要设置 load 函数，使其在某些条件下加载子节点。以下是一个简单的例子：

<template>
  <el-tree
    :indent="0"
    :data="setAllTree"
    ref="tree"
    class="tree-line"
    node-key="key"
    :props="props"
    :expand-on-click-node="true"
    :render-after-expand="true"
    :filter-node-method="filterNode"
    @node-click="handleNodeClick"
    lazy
    :load="loadNode"
  >
    <span class="custom-tree-node" slot-scope="{ data }">
      <span> <i :class="data.icon"></i>{{ data.label }} </span>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      props: {
        children: 'children',
        label: 'label'
      },
      setAllTree: [] // 这里应该是你的初始树数据
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) { // 加载顶层节点
        // 这里应该你的获取树数据的异步函数，以下是一个例子
        this.$http.get('/api/tree').then(res => {
          resolve(res.data); // 将获取到的数据解析并返回给 tree 组件
        });
      } else if (node.level <= 4) { // 前四个级别，默认加载
        // 如果 node 的 level 在 0 到 4 之间，可以按照你的需求获取数据并解析后返回，以下是一个例子
        if (node.level === 1) { // 例如只加载省份
          this.$http.get('/api/tree/province').then(res => {
            resolve(res.data);
          });
        } else if (node.level === 2) { // 例如只加载城市
          this.$http.get('/api/tree/city').then(res => {
            resolve(res.data);
          });
        } else if (node.level === 3) { // 例如只加载区域
          this.$http.get('/api/tree/area').then(res => {
            resolve(res.data);
          });
        } else if (node.level === 4) { // 例如只加载街道
          this.$http.get('/api/tree/street').then(res => {
            resolve(res.data);
          });
        }
      } else { // 其他节点，点击加载
        // 如果 node 的 level 大于 4，可以通过 node 的其他属性（如 label）来获取数据并解析后返回，以下是一个例子
        this.$http.get(`/api/tree/${node.label}`).then(res => {
          resolve(res.data);
        });
      }
    },
    // 其他方法...
  }
}
</script>

这个例子中，loadNode 方法会根据节点的 level 来决定如何加载子节点。当 level 为 0 时，加载顶层节点；当 level 在 0 到 4 之间时，默认加载（你可以根据实际情况调整加载策略）；当 level 大于 4 时，只有当用户点击该节点时才会加载其子节点。注意，你需要将 /api/tree、/api/tree/province、/api/tree/city、/api/tree/area、/api/tree/street 等 URL 替换为你实际的接口地址。