一 问题描述
vue+elementui项目，本地idea启动，功能测试没问题，部署到tomcat服务器，查询表格数据，正确返回后，页面卡死。
浏览器console栏有vue warn信息：you may have an infinite update loop in a component render function
二 排查
debug调试，确实存在循环调用vue源码方法问题，具体原因未知。问题定位在如下代码第四行处：
surveyTemplateSelect(params).then((result) => {if (result.data.status == 0) {console.log(result.data);this.tableData = result.data.data.pageInfo.list;this.tableDataNum = result.data.data.pageInfo.total;this.loading = false;}...控制台打印后台返回数据，pageInfo.list格式正确，可能是表格填充数据时发生的问题；
参考帖子：https://segmentfault.com/a/1190000011156865?utm_source=tag-newest，在 v-for 循环当中，如果用方法或者计算属性对 vm.$data 的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环。此时 Vue 就会发出警告（并不是真的已经无限循环了）。
查找表格数据相关代码，在以下片段中，status进行:formatter时，找到有关修改vm.$data的操作：this.statusBtn=xxx;将这段代码注释掉，不再提示warn信息；
<el-table-column prop="status" align="center" label="有效状态" :formatter="statusFormat" height="36px"></el-table-column>
<el-table-column prop="set" align="center" label="操作" height="36px">
<template slot-scope="scope"><el-button @click.native="handleTemplateStatus(scope.row)" type="text" class="delete" size="small">{{statusBtn}}</el-button><el-button type="text" size="small" class="modify" @click="handleEdit(scope.$index,scope.row)">修改</el-button><!--@click="handleUpdateClick(scope.row)-->
</template>
</el-table-column>statusFormat(row,column){if(row.status=='1'){this.statusBtn = '激活';return '无效';}else if(row.status=='0'){this.statusBtn = '注销';return '有效';}else{this.statusBtn = ''return '';}},三 解决
将status值与激活/注销按钮的联动，用v-if控制，避免在表格数据循环渲染时，直接修改vm.$data里的属性
<el-table-column prop="set" align="center" label="操作" height="36px"><template slot-scope="scope"><el-button @click.native="handleDeadTemplateStatus(scope.row)" v-if="scope.row.status=='1'" type="text" class="delete" size="small">激活</el-button><el-button @click.native="handleAliveTemplateStatus(scope.row)" v-if="scope.row.status=='0'" type="text" class="delete" size="small">注销</el-button><el-button type="text" size="small" class="modify" @click="handleEdit(scope.$index,scope.row)">修改</el-button><!--@click="handleUpdateClick(scope.row)--></template></el-table-column>
本文链接：https://my.lmcjl.com/post/12537.html
展开阅读全文
4 评论