elementUI table fixed设置后，表格无法对齐，滚动条被覆盖（亲测有用）

最新推荐文章于 2025-11-03 10:51:29 发布

转载最新推荐文章于 2025-11-03 10:51:29 发布 · 5.6k 阅读

16 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.cn/post/7124568180881621000

文章标签：

#elementui #vue.js #javascript

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

elementui

2 篇文章

订阅专栏

本文介绍了解决 ElementUI 中 table 使用 fixed 功能时出现的滚动条被覆盖及行不对齐的问题。提供了 CSS 样式的调整方法，包括设置固定列高度自适应、解决表格内容挤占空间以及调整滚动条样式。

elementUI table fixed设置后，表格无法对齐，滚动条被覆盖

elementUI table fixed设置后，表格无法对齐，滚动条被覆盖
element中的table表格功能是非常好用的一款功能，但是在实际使用中发现了两个问题：

1、table开启fixed功能后底部滚动条被覆盖：
在这里插入图片描述

滚动条被覆盖，导致被覆盖部分没办法拖动

解决方法：

设置公共样式，将被遮罩部分减少
// 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式
// 20px 为滚动条的高度
.el-table__fixed, .el-table__fixed-right{
height: calc(100% - 20px) !important;
}

上面代码写完后，会遇到另外一个问题，但没有滚动条的时候，内容会给挤上去，如图所示

这时候就需要加上另外一个代码了

// 当表格没有滚动条时
.el-table__body-wrapper.is-scrolling-none_{.el-table__fixed-right,.el-table__body-wrapper.is-scrolling-none}.el-table__fixed{
height: 100% !important;
box-shadow: none !important;
}

ps:个人项目实际测试过程中，其实只要
.el-table__fixed-body-wrapper {
height:100 !import;
}
就行

2、table开启fixed功能后，上下滚动行无法对齐

如图所示：
在这里插入图片描述

表格滑动到最后一行后出现无法对齐的情况，这个问题主要是滚动条的原因，因为你设置了::-webkit-scrollbar{ width:1px; height:10px; }，即：滚动条的width和height不一致导致的，设置成一样的就好了。

解决方法：

通过css样式，修改表格样式
.el-table__fixed-body-wrapper .el-table__body {
padding-bottom: 20px; // 滚动条高度
}

ps：这个高度并不是20px，而是你::-webkit-scrollbar的height多高，你就最好写多高，这样差异是最小的

复制代码
如果没有生效注意使用deep穿透改样式，或者加上!important

注：本项目所有的el-table表格的滚动条都增加了高度，故解决方法都是写在全局样式里面，请根据实际情况，修改相应的样式

个人结论：
.el-table_fixed, el-table__fixed-right {
height:100% !important;
}
.el-table__fixed-body-wrapper {
height:100 !import;
}
.el-table__fixed-body-wrapper .el-table__body {
padding-bottom: 20px; // 滚动条高度
}

参考文献：
https://link.juejin.cn/?target=https%3A%2F%2Fwww.cnblogs.com%2Fsixrookie%2Fp%2F14777274.html
https://link.juejin.cn/?target=https%3A%2F%2Fblog.youkuaiyun.com%2Fnick_king%2Farticle%2Fdetails%2F109583883

本文转载地址
https://juejin.cn/post/7124568180881621000