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

上网查了下,意思是堆栈溢出,这个提示让我十分头疼,网上关于出现这个问题的原因有很多种,但是我没有找到和我这个一样的。到了最后,才找出来原因出在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的更多相关文章
- 报错:Maximum call stack size exceeded
最后通过查看一篇别人的博客,通过对照,发现我把参数值写反了,把参数a的值写成了参数b的值.详情可以看如下博客: https://www.cnblogs.com/dunitian/p/5865725.h ...
- 解决Mongoose 返回的文档过大导致模板引擎art-template无法渲染的问题,错误-RangeError: Maximum call stack size exceeded
参考:https://blog.csdn.net/qq_40659195/article/details/88411838 最近尝试用Node写一个小案例,使用到了MongoDB,使用过的人可以知道, ...
- 浏览器JS报错Uncaught RangeError Maximum call stack size exceeded
JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...
- Vue -- 项目报错整理(1):RangeError: Maximum call stack size exceeded
这几天项目运行报了个错: Uncaught RangeError: Maximum call stack size exceeded,刚开始看到 "returnNodeParameter&q ...
- 新下载了一个框架,然后npm install时候报错npm ERR! Maximum call stack size exceeded
今天遇到这个npm ERR! Maximum call stack size exceeded报错 解决方案如下: 1.更新npm版本 //查看版本 npm -v //更新 npm install - ...
- 浏览器JS报错Uncaught RangeError: Maximum call stack size exceeded?
JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...
- js中报错"Maximum call stack size exceeded"解决方法
Uncaught RangeError: Maximum call stack size exceeded 错误直译过来就是“栈溢出”,出现这个错误的原因是因为我进行了递归运算,但是忘记添加判断条件, ...
- Uncaught RangeError: Maximum call stack size exceeded 超出最大调用值(个人解释)
写了段jq后,报这个错,度娘未解,灵光一闪,找到原因,上代码: Html 结构: <a href="javascript:;" class="item-pic&qu ...
- Uncaught RangeError: Maximum call stack size exceeded 超出最大调用值
“Uncaught RangeError: Maximum call stack size exceeded”.当运行js时出现这个报错,但你又查不到原因的时候,不要慌. 真相只有一个,那就是你的代码 ...
- nodeis 避免回调引起的栈溢出 Maximum call stack size exceeded
//如果这样写,会发生栈溢出 var i = 1; function isEven() { console.log(i++); // return isEven(); retu ...
随机推荐
- manim边学边做--曲线类
manim中曲线,除了前面介绍的圆弧类曲线,也可以绘制任意的曲线. manim中提供的CubicBezier模块,可以利用三次贝塞尔曲线的方式绘制任意曲线. 关于贝塞尔曲线的介绍,可以参考:https ...
- Ansible 知识
Ref: guru99.com/ansible-tutorial.html https://www.digitalocean.com/community/tutorials/how-to-use-an ...
- Linux下Shell脚本实现统一管理服务启停重启
公司今年开始了大批量的裁员,人心惶惶,所以强迫自己学习点新知识,刚好领导给找了个事情,让写个脚本实现一键启停Linux服务器上的服务,于是开始研究这个怎么搞. 最开始的时候,有点想当然了,觉得一键启停 ...
- C++11 线程同步接口std::condition_variable和std::future的简单使用
std::condition_variable 条件变量std::condition_variable有wait和notify接口用于线程间的同步.如下图所示,Thread 2阻塞在wait接口,Th ...
- WiFi基础(四):WiFi工作原理及WiFi接入过程
liwen01 2024.09.16 前言 802.11 无线 WiFi 网有三类帧:数据帧.管理帧.控制帧.与有线网相比,无线 WiFi 网会复杂很多.大部分应用软件开发对 WiFi 的控制帧和管理 ...
- Linux命令每天都要使用,但又太长记不住怎么办?教你1个方法
序言各位好啊,我是会编程的蜗牛,作为java开发者 ,我们肯定会与linux服务器打交道,关于linux服务器的连接工具,可以参考我的文章Tabby,一款老外都在用的 SSH工具,竟然还支持网页操作~ ...
- 2024-09-21:用go语言,给定一个字符串 s,字符串中的每个字符要么是小写字母,要么是问号‘?‘。对于一个仅包含小写字母的字符串t,我们定义cost(i)为在t的前i个字符中与t[i]相同的字
2024-09-21:用go语言,给定一个字符串 s,字符串中的每个字符要么是小写字母,要么是问号'?'.对于一个仅包含小写字母的字符串t,我们定义cost(i)为在t的前i个字符中与t[i]相同的字 ...
- HDLC报文简单分析
最近在学习HDLC协议,从刚开始的一窍不通到现在的懵懵懂懂,下面分享一段报文解析,给初学者一点点经验的分析. 报文:7E A0 57 03 02 B8 4B 5B E6 E7 00 C4 01 C1 ...
- 分布式执行引擎Ray-部署
1. Ray集群 Ray 有多种部署模式,包括单机,k8s,VM等. 在单机下,可以直接用ray.init来快速启动ray的运行环境,但是如果要在多节点上执行,则必须先部署Ray Cluster. 一 ...
- 运维管理平台OEM定制集成开发,激发IT价值
对硬件设备商而言,借助优秀的网管.运维管理平台,可以形成完整的产品解决方案,直接提升产品的形象和适用范围.同时还可以通过网管.运维管理平台,切入到外围的产品及集成领域,并在用户后续的升级改造活动中占据 ...