element ui table表格添加flex固定列表格出现错位问题

最新推荐文章于 2024-04-08 21:53:05 发布

刘建状

最新推荐文章于 2024-04-08 21:53:05 发布

阅读量2.2k

点赞数 2

分类专栏： Vue Element ui css 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_54259790/article/details/118991124

版权

9 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

如图：表格已出现错位
在这里插入图片描述

说明：出现这个问题的原因是因为，div.el-table__body-wrapper这个元素的高度过低，导致我们滚动的时候，设置flex固定的列的内容已经没有可出现的了，而div.el-table__body-wrapper这个元素还有一些内容没有出现，所以造成了错位
在这里插入图片描述

我出现这个问题主要是因为，右边的滚动条占据了表格的位置或者是因为横向的滚动条高度和垂直的滚动条的宽度不一致造成div.el-table__body-wrapper这个元素的高度过低

如图：
在这里插入图片描述
很明显不一样，所以我们就把他们设置成一样就可以了

代码：


 // 这是控制滚动条的css我们设置成一样下就好了，放在哪里都可以，我放在了reset.css里面
 ::-webkit-scrollbar{
   width: 5px; /*滚动条宽度*/
   height: 10px; /* 滚动条高度 */
 }

最终效果如图：
在这里插入图片描述
哈哈，就不会发生错位了！谢谢！

刘建状

关注