VUE+ELEMENT:表格渲染导致的 异常:You may have an infinite update loop in a component render function

场景:

  做一个全文检索，检索到的记录显示到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实现搜索关键字高亮功能