报错:
使用场景:
在el-table中有个按钮子组件,当el-table中只有一条数据的时候不会有错,但是当数据大于1条时页面就报错了。调试过程中,是因为加了这个按钮后发现页面报错:
You may have an infinite update loop in a component render function
所以后面找原因就在 getParam这个方法里面找
<el-table :data="data.list1">
<!-- 省略字段 -->
<el-table-column fixed="right" header-align="center" align="left" width="100" label="操作">
<template slot-scope="scope">
<!-- 这里面包了个子组件进入按钮 -->
<export-word :fileName="fileName" :btnName="btnName" :exportData="getParam(scope.row)"> </export-word >
</template>
</el-table-column>
</el-table>
getParam最开始是这样写的
export default {
data () {
return {
dataForm: {
key: ''
},
wordData: {
},
}
},
methods: {
init(){
//调接口 然后给this.wordData 赋值部分字段
},
getParam(rowObj){
this.wordData.id = rowObj.id;
this.wordData.date = rowObj.date;
console.log("data==",JSON.stringify(this.wordData))
//.......省略部分赋值
return this.wordData;
}
}
其实看起来是没问题。因为this.wordData在页面初始化调接口的时候也有赋值其他的数据,所以是将wordData定义在了 data里面。
解决一:
后来我发现了上面的代码换成重新定义是没问题的不会报错,不用this.。也就是如下:
getParam(rowObj){
var wordData = new Object();
//其他赋值
wordData.name = this.data.name;
wordData.age = this.data.age;
// 行赋值
wordData.id = rowObj.id;
wordData.date = rowObj.date;
console.log("data==",JSON.stringify(wordData))
//.......省略部分赋值
return wordData;
}
解决二:
后面我想还原错误,截报错图来发文的时候,随意去掉了注释,发现居然不报错啦!!!
原来是打印了this.wordData才造成报错有无限循环,我如果用原来的代码去掉打印也是没问题的
getParam(rowObj){
this.wordData.id = rowObj.id;
this.wordData.date = rowObj.date;
//去掉打印 不会报错console.log("data==",JSON.stringify(this.wordData))
//.......省略部分赋值
return this.wordData;
}
都能解决就无所谓用哪个了,觉得有点奇怪还是记下。