Element的el-table-column设置为fixed=“right“时的高度不正确问题

        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()
},

        效果很不错,按钮显示完整,抖动也没有了,问题完美解决!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值