el-table树表格报错 Error in render: Maximum call stack size exceeded

问题描述

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

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>

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

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