小鹦鹉的踩坑日记其二
废话不多说,直接上图.这里需要通过下拉框选中的某一项来改变表格的数据源,本来想着重新抽离一个组件.
但是考虑到其他效果(比如左边搜索定位)比较繁琐,索性在table中对column进行条件渲染.于是问题出来了.
切换的时候表格的数据是存在的,但是没有进行展示
表格分页之后的数据
初步分析:
虽然切换了数据源,但是当前组件并没有进行销毁重建,但是DOM发生了改变,而数据匹配不上,
要做的就是让当前组件重新渲染.然后百度提供了三种方案
①使用v-if
②使用key
③$forceUpdate
结合当前场景,最后使用的key解决了这个问题.
解决方法:在table中添加一个 :key="tableKey",每次切换表格的时候改变这个tableKey
使它是一个唯一值.从循环中的key可以知道,table的这个key应该是和它差不多的功能,于是
查官方文档,但是没找到,最后在GitHub的issues中找到了相关问题.
el-table中的key用于判断table是否进行重新渲染.虽然给table加上key之后问题解决了
不过表格空白的原因还是没找到
