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

Question

      <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，如果子级数组为空，那么在街道级的时候是无法让它懒加载展开的

Answer 1

1、不用原生 lazy ，单独设置点击图标，四层以后的点击展开重写事件，进行数据更新。
2、用原生 lazy，开始时通过 updateKeyChildren 为根节点赋值前四层数据，这里可能还需要自己展开

Answer 2

在 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 替换为你实际的接口地址。