Vue3+Avue或Element表格树懒加载堆栈报错render function解决方法

---

前言

使用Vue3+Avue3表格树懒加载resolve时报错render function 并且堆栈

---

一、原因

我的项目是因为下级id与上级id相同 导致为上一级children赋值时 Avue resolve方法嵌套数据时无限循环导致堆栈在这里插入图片描述

二、解决方法

        apiguard(arr).then((data) => {
          var records = data.data.data.records;
          data.data.data.records.forEach(function (res, index) {
           // 为数据赋值一个新的id
            records[index].proid = res.id;
            // 原id前面插入一个固定数字例如一级插1二级插2
            records[index].id = ("3" + res.id) * 1;
            if (res.locationCount != 0 && res.locationCount) {
            // 为下级有数据的插入懒加载
              records[index].hasChildren = true;
              records[index].hasindex = 3;
            }
          });
          resolve(records);
          })

这样就解决了id相同导致的堆栈了

三，原因二

也有可能是数据格式不正确导致的

// 检查数据结构确保您提供的数据具有正确的结构。在懒加载的情况下，每个节点的数据都应该具有一个 children 属性，该属性在加载子节点时会被填充。
{
    "id": 1,
    "label": "Level one",
    "children": []
}
// 检查 load 方法确保您在 load 方法中正确处理了异步加载。这意味着您需要在加载完成时调用 resolve 函数。例如:
load: (node, resolve) => {
  // 这里可以根据 node 的层级或者其他条件来获取数据
  const data = ...;

  // 加载完成后调用 resolve 函数
  setTimeout(() => {
    resolve(data);
  }, 500);
}