elementUI中el-table表格的表头样式错位
版本:element-ui2.12.0
1.问题描述:
使⽤elementUI的el-table表格组件时,表格⾼度定⾼,内容过多时右侧会出现滚动条,然后就会出现如下图所⽰的列错位的样式:
解决办法:
在⽹上也找了好多⽅法,试了好多改CSS样式的⽅式,都没有什么⽤,没有达到效果,最后还是采⽤js的doLayout⽅法,在获取到数据后
重绘表格,实现了想要的效果。
代码很简单,如下:
templete中给表格设置ref属性:
script中强制重绘渲染表格(在请求后台获取到列表数据以后):
this.$nextTick(()=>{
this.$ut();
})
最终,实现了表格列的对齐显⽰如下图:
2.问题描述
表格设置了第⼀列固定后,然后表头的第⼀列下⽅就出现了⼀条边框线。
解决办法:
.el-table__headerth{
background:#f2f2f6;
-webkit-box-shadow:0px0px0px0px#d2d2d2;
box-shadow:0px0px0px0px#d2d2d2;
}
最终效果:
还有什么问题,欢迎留⾔哦~~~
本文发布于:2022-12-09 01:43:58,感谢您对本站的认可!
本文链接:http://www.wtabcd.cn/fanwen/fan/88/69578.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
| 留言与评论(共有 0 条评论) |