问题形容
和后端联调树结构表格时，原本是好好的，起初忽然呈现：当点击表格中树结构开展的小箭头的时候，忽然呈现这样的报错：
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>演示的话，间接复制粘贴即可
好忘性不如烂笔头，记录一下吧