el-table渲染错误

2020-04-22  本文已影响0人  SimonYi1230
Chrome报错

遇见这样的一个错误,通过百度发现是el-table的问题,于是到代码中寻找问题

index.vue的created部分

在created阶段,前端会向Django后台发送请求,并将返回的对象逐个加入到this.tableDataBegin中

该部分我执行了两个近乎相同的操作,为两张表的数据进行了push操作,第一部分注释掉后,问题仍然存在

注释掉第二段之后,报错消失,说明是第二张表的渲染问题

经过仔细比对,两部分的代码行为一致,通过console.log也发现一个特点——当this.ReceivedTableDataBegin,也就是第二张表的长度为0时,报错消失。

说明只要没有需要渲染的数据,就不会出错,问题应该是出在template部分

浏览器页面

在这张表的最后一行操作处,我嵌入了一个查看按钮,用于查看这一行的详细信息,一开始选用了element弹出框——Popover,在内部再次嵌入了一个el-table(迷之操作。。。)


js代码

将红框部分注释掉,就能正常运行了

一般来说报这个错的网上多半是将后台发来的对象直接赋值给数组导致的渲染错误,我这个算是比较奇葩的错法,记录下来以后避免踩坑。

Tips:按钮触发的弹框完全可以用一个单独的div和v-if配合按钮改变Visible的值的方式来实现,没有必要去破坏一个el-table内部完整的正确逻辑!!

上一篇下一篇

猜你喜欢

热点阅读