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實作搜尋關鍵字高亮功能