今天在研究keep-alive页面缓存的时候发现,切换到其他页面再切换回已打开的页面时,el-table表格出现底部还有空白,但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图:


解决:
在网上找了一些方法,发现doLayout()方法可以完美解决!
element2.0.5发布的该方法,可以用于重新计算表格布局

使用方法:
如果不是缓存页面,在mounted调用,如果是缓存页面,则在activated调用。在我的项目中是只有在缓存的页面才有这个问题,所以就只需要加activated的就行了哦
mounted() {
this.$nextTick(() => {
this.$refs.simpleTable.doLayout()
})
},
activated() {
this.$refs.simpleTable.doLayout()
}
在研究Vue的keep-alive页面缓存功能时,遇到一个el-table在切换页面后底部出现空白并显示滚动条的bug。经过排查,发现el-table__body-wrapper的高度小于el-table。解决方案是在activated钩子中调用doLayout()方法,重新计算表格布局,从而修复了这个问题。此方法适用于Vue 2.0.5及以上版本。
778

被折叠的 条评论
为什么被折叠?



