乐趣区

关于element-ui:eltable树表格报错-Error-in-render-Maximum-call-stack-size-exceeded

jiezi

问题形容

和后端联调树结构表格时，原本是好好的，起初忽然呈现：当点击表格中树结构开展的小箭头的时候，忽然呈现这样的报错：

Error in render: "RangeError: Maximum call stack size exceeded"

报错截图如下：

报错截图

起因

通过看看官网文档，得出起因如下：

应用树表格，须要指定 row-key=”id”，即给每一行数据绑定一个惟一身份标识 id，然而 id 不能反复。若子节点和父节点 id 一样，就会导致树的递归函数出错，就会导致渲染谬误，因为会始终递归，从而超过最大调用堆栈空间。所以肯定要 id 不同，惟一身份标识肯定要具备唯一性。

模仿代码 

<template>
  <div>
    <!-- 
        row-key="id" 须要指定，不指定就不会呈现 右侧朝向小箭头 就没有懒加载的状况
        tree-props 配置树表格懒加载标识
        load 办法，用于点击小箭头加载数据
        lazy 开启懒加载当前，就能够把 load 来的数据追加到表格中去了
    -->
    <el-table
      :data="tableData1"
      style="width: 100%"
      border
      row-key="id"
      :tree-props="{children:'children', hasChildren:'hasChildren'}"
      :load="load"
      lazy
    >
      <el-table-column type="index" label="序号" width="50" fixed></el-table-column>
      <el-table-column prop="name" label="书名" width="180"> </el-table-column>
      <el-table-column prop="date" label="年代" width="180"> </el-table-column>
      <el-table-column prop="price" label="价格（元）" width="180"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {data() {
    return {
      tableData1: [
        {
          id: 1,
          name: "三国演义",
          date: "三国期间",
          price: "77",
        },
        {
          id: 2,
          name: "西游记",
          date: "唐朝",
          price: "100",
          hasChildren: true,
        },
        {
          id: 3,
          name: "水浒传",
          date: "宋朝",
          price: "108",
        },
      ],
    };
  },
  methods: {load(tree, treeNode, resolve) {console.log("点击触发", tree, treeNode);
      let apiDataArr = [
        {
          id: 2, // id 不能反复，反复就报错   因为指定的 row-key="id" 须要指定确保唯一性
          name: "大闹天宫", // 这里让其和西游记那一行的 id 反复，便会呈现 Error in render: "RangeError: Maximum call stack size exceeded"
          date: "神话时代",
          price: "666",
        },
        {
          id: 5,
          name: "虚实美猴王",
          date: "神话时代",
          price: "2333",
        },
      ];
      // 模仿后端返回的数据
      setTimeout(() => {resolve(apiDataArr);
      }, 1000);
    },
  },
};
</script>

演示的话，间接复制粘贴即可

好忘性不如烂笔头，记录一下吧

退出移动版