elementUI的table表格表头错位问题解决

更新(2019/11/20):据网友(nchencc)提供的方法,只需要在App.vue的style里添加以下样式即可!

.el-table--border th.gutter:last-of-type {
    display: block!important;
    width: 17px!important;
}
如以上解决不了的再往下看↓

一、出现问题:

在vue项目中引入elementUI的table组件,当将表格的头部和列固定后就会出现表头与内容错位的问题。如下图:

elementUIçtable表格表头éä½
二、解决方法:

在遇到该问题时,我百度了解决方法,差不多都是添加css样式覆盖,但用在我的项目中是没能解决的。后来秉着解决问题和优化用户体验的耐心,逐步去排查。后来排查找到当拖动浏览器页面后发现表头就不再错位。所以按我所知,这很有可能是渲染前后的问题,在我能力不足去修改elementUI组件的同时,我用了个土方法解决该问题,虽然很蹩脚,但也算是解决方法的一种。
在el-table组件挂载一个ref="configurationTable",然后在每次请求数据成功后动一动表格的默认宽度
this.$refs.configurationTable.$el.style.width = '99.99%' (如果99.99%不行,可以将值设置小一点试试)
三、建议意见:

该解决方法很蹩脚,如果大家以后有更好的解决方法,还望告知。非常感谢~
————————————————
版权声明:本文为CSDN博主「NewDayStudy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/NewDayStudy/article/details/97887917

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值