项目中需要做一个功能,在表格中如果存在二级列表,点击箭头之后请求后台接口,展开显示二级列表的内容。点击箭头拿到了数据,但是后台会报错如下图,且数据展示不出来

上网查了下,意思是堆栈溢出,这个提示让我十分头疼,网上关于出现这个问题的原因有很多种,但是我没有找到和我这个一样的。到了最后,才找出来原因出在table列表绑定的row-key上,因为row-key绑定的参数必须是唯一的,我绑定的是id。但是后台返回的列表中一级列表中的id和二级列表中的第二条数据的id是一样的,所以才报出了这样的错误。关于堆栈溢出的问题说完了,下面要写一下table懒加载这个功能:

表格中需要绑定row-key,lazy,load和tree-props,代码如下:

<el-table
:data="tableList"
stripe
border
:height="tableHeight.height"
:row-class-name="tableRowClassName"
tooltip-effect="light"
:header-cell-style="{background:'#f2f2f2'}"
row-key="id"
lazy
:load="queryByRuleFlowIdAndParentId"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
v-loading="showTableLoading"
>
<el-table-column prop="name" label="规则名称" width="200" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="ruleNum" label="规则编码" width="200" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="systemName" label="所属规则集" width></el-table-column>
<el-table-column prop="processTypeName" label="层级"></el-table-column>
<el-table-column label="状态" width="80">
<template slot-scope="scope">
<span v-text="scope.row.statusCd == 1?'在用':'失效'"></span>
</template>
</el-table-column>
<el-table-column prop="descp" label="描述" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop label="操作" width="310">
<template slot-scope="scope">
<el-button type="text" size="mini">修改条件/参数</el-button>
<el-button type="text" size="mini" @click="newsameNode">新建同级规则</el-button>
<el-button type="text" size="mini">新建子规则</el-button>
<el-button type="text" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>

下面是对应的方法

queryByRuleFlowIdAndParentId(tree, treeNode, resolve) {
let self = this;
let data = {
ruleFlowId: 100002042,
// this.searchData.ruleFlowId
parentId: 100002066,
//tree.id
currentPage: self.currentPage,
};
let arr = [];
$ajaxRuleView.queryByRuleFlowIdAndParentId(data, (res) = > {
if (res.code == '0000') {
console.log(res.data);
if (res.data && res.data.length > 0) {
res.data.map((item, index) = > {
arr.push({
id: item.id,
name: item.name,
ruleNum: item.ruleNum,
systemName: item.systemName,
processTypeName: item.processTypeName,
statusCd: item.statusCd,
descp: item.descp,
});
});
resolve(arr);
}
}
});
}

关于elementUI的table报错RangeErr Maximum call stack size exceeded的更多相关文章

  1. 报错:Maximum call stack size exceeded

    最后通过查看一篇别人的博客,通过对照,发现我把参数值写反了,把参数a的值写成了参数b的值.详情可以看如下博客: https://www.cnblogs.com/dunitian/p/5865725.h ...

  2. 解决Mongoose 返回的文档过大导致模板引擎art-template无法渲染的问题,错误-RangeError: Maximum call stack size exceeded

    参考:https://blog.csdn.net/qq_40659195/article/details/88411838 最近尝试用Node写一个小案例,使用到了MongoDB,使用过的人可以知道, ...

  3. 浏览器JS报错Uncaught RangeError Maximum call stack size exceeded

    JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...

  4. Vue -- 项目报错整理(1):RangeError: Maximum call stack size exceeded

    这几天项目运行报了个错: Uncaught RangeError: Maximum call stack size exceeded,刚开始看到 "returnNodeParameter&q ...

  5. 新下载了一个框架,然后npm install时候报错npm ERR! Maximum call stack size exceeded

    今天遇到这个npm ERR! Maximum call stack size exceeded报错 解决方案如下: 1.更新npm版本 //查看版本 npm -v //更新 npm install - ...

  6. 浏览器JS报错Uncaught RangeError: Maximum call stack size exceeded?

    JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...

  7. js中报错"Maximum call stack size exceeded"解决方法

    Uncaught RangeError: Maximum call stack size exceeded 错误直译过来就是“栈溢出”,出现这个错误的原因是因为我进行了递归运算,但是忘记添加判断条件, ...

  8. Uncaught RangeError: Maximum call stack size exceeded 超出最大调用值(个人解释)

    写了段jq后,报这个错,度娘未解,灵光一闪,找到原因,上代码: Html 结构: <a href="javascript:;" class="item-pic&qu ...

  9. Uncaught RangeError: Maximum call stack size exceeded 超出最大调用值

    “Uncaught RangeError: Maximum call stack size exceeded”.当运行js时出现这个报错,但你又查不到原因的时候,不要慌. 真相只有一个,那就是你的代码 ...

  10. nodeis 避免回调引起的栈溢出 Maximum call stack size exceeded

    //如果这样写,会发生栈溢出 var i = 1; function isEven() {      console.log(i++); // return isEven();        retu ...

随机推荐

  1. 游戏AI行为决策——MLP(多层感知机/人工神经网络)

    游戏AI行为决策(特别篇)--MLP(附代码与项目) 你一定听说过神经网络的大名,你有想过将它用于游戏AI的行为决策上吗?其实在(2010年发布的)<最高指挥官2>中就有应用了,今天请允许 ...

  2. Round #2022/11/26

    问题 B:染色 题目描述 有长度为 \(n\) 的一个序列,编号为 \(1\) 到 \(n\) ,现要对这些元素进行染色标记,若编号 \(i-j\) 为素数,且 \(1\le i < j \le ...

  3. Qml 实现瀑布流布局

    [写在前面] 最近在刷掘金的时候看到一篇关于瀑布流布局的文章,然鹅他们的实现都是前端的那套,就想着 Qml 有没有类似实现. 结果百度了一圈也没有( T_T Qml 凉了凉了 ),于是,我按照自己理解 ...

  4. BOM – Window.matchMedia

    参考 Youtube – Detecting Screen Size and OS Dark Mode with matchMedia() - JavaScript Tutorial 介绍 CSS 有 ...

  5. C# – 10.0

    前言 之前写过 6.0, 7.0, 8.0, 9.0 总结. 10.0 也是有些好东西哦, 尤其是 pattern matching 的完善, 差不多是时候可以重构 if else switch 的写 ...

  6. mongo 副本集rs 理解和使用小结

    转载请注明出处: 在MongoDB中,rs(通常指的是"replica set"的缩写)是复制集(Replica Set)的标识符或在使用时的一种常见前缀,尤其是在命令行工具和脚本 ...

  7. 全网最适合入门的面向对象编程教程:54 Python字符串与序列化-字符串格式化与format方法

    全网最适合入门的面向对象编程教程:54 Python 字符串与序列化-字符串格式化与 format 方法 摘要: 在 Python 中,字符串格式化是将变量插入到字符串中的一种方式,Python 提供 ...

  8. eUSB是什么/可以干什么?

    eUSB总结 1.什么是eUSB 1.1 eUSB概念 eUSB是原USB物理层上的补充,为了解决USB_phy低压需求的问题而出现的,eUSB可以将信号电平降至1.2V甚至更低,与此同时可以优化电源 ...

  9. 「模拟赛」A 层多校联训 4(卖品:CTH)

    双倒一啦! 感觉这次最大的错误就是没看 T2.(本质原因还是时间浪费的太多了) 赛时记录在闲话啦 accoder 多校比赛链接 02 表示法 唐诗题!考高精的人都\(**\),输出深度优先搜索解决.高 ...

  10. 【墨天轮专访第四期】华为云GaussDB苏光牛:发挥生态优势,培养应用型DBA

    导读: 随着5G互联网时代的来临,各行各业对于数据库的依赖程度也在逐步提高.由于国内在数据库行业的发展起步较晚,数据库的市场份额长期被Oracle,微软等美国公司所控制.但是伴随着国内IT技术栈的不断 ...