element-ui树表的子节点懒加载

Question

一级节点不需要懒加载，子节点都需要懒加载，但是我的lazy直接放在tree里面，当没有孩子的时候就会报错，这是为什么？

Answer 1

如果使用懒加载功能，需要注意以下几点:

1. lazy 属性的值需要为 true，表示启用懒加载功能。

2. 在每个节点的数据对象中，需要通过 hasChildren 字段或者 children 字段来表示该节点是否有子节点，如果节点有子节点，则必须添加一个空的 children 字段，比如：

   [{
     id: 1,
     label: '一级节点',
     hasChildren: true,
     children: [] // 一定要添加一个空的 children 字段
   }]
   

3. 在 load 属性中提供异步加载数据的方法，方法的参数中包含了当前节点的数据对象，可以结合后端 API 得到该节点的子节点，并使用回调函数将其传递给树表组件。

基于以上几点，为了避免出现没有孩子的节点导致出现报错的问题，我们可以考虑在异步加载数据时需要判断当前节点是否有子节点，如果没有则返回一个空的数组，例如：

<template>
  <el-tree
    :data="treeData"
    :lazy="true"
    :load="loadData"
    v-on:node-click="onClick"
    :indent="16"
    node-key="id"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }"> {{ node.label }} </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
    };
  },
  methods: {
    loadData(node, resolve) {
      // 判断当前节点是否有子节点
      if (node.data.hasChildren) {
        setTimeout(() => {
          // 加载子节点数据并通过回调函数传递给树表组件
          resolve([
            {
              id: `${node.data.id}-1`,
              label: `二级节点1`,
              hasChildren: true,
              children: [],
            },
            {
              id: `${node.data.id}-2`,
              label: `二级节点2`,
              hasChildren: false,
              children: [],
            },
          ]);
        }, 1000);
      } else {
        // 如果没有子节点，则直接返回一个空的数组
        resolve([]);
      }
    },
    onClick(node, data) {
      console.log(`点击了 ${node.label}，该节点的数据为：`, data);
    },
  },
};
</script>

在使用懒加载功能时，如果节点没有子节点，其 children 字段需要设置为一个空数组，而不是 null 或者未定义，否则会引起出现报错。