關於elementUI的table報錯RangeErr Maximum call stack size exceeded
阿新 • • 發佈:2020-08-08
專案中需要做一個功能,在表格中如果存在二級列表,點選箭頭之後請求後臺介面,展開顯示二級列表的內容。點選箭頭拿到了資料,但是後臺會報錯如下圖,且資料展示不出來
上網查了下,意思是堆疊溢位,這個提示讓我十分頭疼,網上關於出現這個問題的原因有很多種,但是我沒有找到和我這個一樣的。到了最後,才找出來原因出在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); } } }); }