以前使用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;
}