VUE+ELEMENT:表格渲染导致的 异常:You may have an infinite update loop in a component render function
场景:做一个全文检索,检索到的记录显示到el-table表中,这本是一个简单的问题。后面要对检索的Key在记录中做高亮显示,遇到了这个异常。百度一下,很吓人。可能有无限更新循环,这怎么行,听着这得耗多少客户端资源。在做高亮展示时候,我是放到column中进行的<el-table><el-table-column>&...
场景:
做一个全文检索,检索到的记录显示到el-table表中,这本是一个简单的问题。后面要对检索的Key在记录中做高亮显示,遇到了这个异常。
百度一下,很吓人。可能有无限更新循环,这怎么行,听着这得耗多少客户端资源。
在做高亮展示时候,我是放到column中进行的
<el-table>
<el-table-column>
<template slot-scope="scope">
<span v-html="drawmenthod(scope.row)"
</template>
</el-table-column>
</el-table>
......
//渲染方法
drawMenthod(row){
let valueDrawed = "渲染后高亮显示的值"
return valueDrawed
}
也就是说,渲染table的过程中,再对表格进行渲染。
然后就出现了奇怪的问题,对于部分查询参数,(重点是部分),会出现异常You may have an infinite update loop in a component render function, 要么错,要么对,这种又错又对排查最头疼。
对结果集和结果集数量进行排查,没有发现原因,也没有发现会出现异常的KEY的特征,
事实上渲染的结果也是对的。唯一的问题就是这个错误导致我的v-loading 关闭的时候,不能正确渲染关闭。
最后做出了妥协,将高亮处理放到了渲染table之前就处理好。
<el-table
:data="tableData.rows"
>
<el-table-column>
<template slot-scope="scope">
<span v-html="scope.row.name"
</template>
</el-table-column>
</el-table>
......
//渲染方法
drawMenthod(row){
let valueDrawed = "渲染后高亮显示的row对象"
return valueDrawed
}
//请求后台的方法
loadData(){
this.$http.get(URL).then(res =>{
#取出数据
let tableTmp = res.data.data
let tableOrign = JSON.parse(JSON.stringify(res.data.data)) //赋值原始返回对象
#遍历渲染
tableTmp.forEach(item =>{
this.drawMenthod(item)
})
tableData.rows = tmpData
})
}
最开始导致这个问题的原因还是没找到......
参考:
1.https://segmentfault.com/a/1190000011156865?utm_source=tag-newe 本文 提到的异常
2.https://www.jb51.net/article/162114.htm vue+Element实现搜索关键字高亮功能
更多推荐
所有评论(0)