vue2+element-ui,我们一般针对el-table-column设置fixed="right"来固定展示按钮列。当切换到别的标签页再切换回来,按钮列的高度会变小导致按钮的下半部分显示不全:
F12查看元素后,我尝试在App.vue的css中加入以下样式来解决问题:
.el-table__fixed-right {
height: 100% !important;
}
这确实解决了按钮显示不全的问题,但是加入之后,高度由固定值改为动态计算会导致从别的标签页切换回来时,表格的加载过程中,按钮列部分的加载会有剧烈的抖动现象(截了好几次才截到,你可以加一下这个样式去实际1体验下,真的非常严重):
这当然不行,于是我又查看了Element的文档,想起来了Table组件还有这么一个方法:
于是我在保留了App.vue中加入的样式之外,又在Vue-Router特有的activated钩子中加了这段代码:
activated() {
this.$refs.tableRef.doLayout()
},
效果很不错,按钮显示完整,抖动也没有了,问题完美解决!