el-table表格设置show-overflow-tooltip后导致单元格居中失效的问题!

以前使用element的el-table组件时,如果要内容和表头都居中,一般是直接设置表头和单元格属性:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"。就可以实现相关功能。

但是今天遇到了这个问题,表格内容比较多的时候需要省略号…显示,鼠标移入显示内容,所以使用show-overflow-tooltip:true属性,但是出现了如下问题:

在这里插入图片描述

可以看到并没有居中。个人理解是每列的宽度是根据表头进行计算的,设置居中后会直接根据单元格内容进行居中,但是如果加了show-overflow-tooltip属性后,就会强制一行显示,会造成这种问题,不知道理解对不对

解决办法也挺简单,重新给它写样式,但是一定要加!important。否则是无效的,如果表格嵌套或者是复用的,建议不要使用,以免造成样式污染错乱了

::v-deep .el-table tr .el-table__cell .cell{
              width: 100% !important;
              
}

在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值