element-ui Table 表格自定义滚动条和fixed时表格错位的解决方案

最新推荐文章于 2025-09-04 18:43:24 发布

原创最新推荐文章于 2025-09-04 18:43:24 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #elementui

在项目中遇到ElementUI表格滚动错位的问题，特别是使用了自定义滚动条样式后。经过排查，问题在于`.el-table__body-wrapper::-webkit-scrollbar`的宽高设置。解决方案是确保表格和内部滚动条的宽度和高度一致。通过设置`.el-table__body-wrapper::-webkit-scrollbar`和`.el-scrollbar__wrap::-webkit-scrollbar`的宽高为相同值，如8px，可以修复滚动错位的问题。这种方法有效避免了因自定义滚动条样式引起的布局混乱。

问题描述：

在项目中遇到需要自定义滚动条样式和fixed表格滚动错位时遇到的问题。
例如：下方滚动表格产生错位
在这里插入图片描述

用了this.$refs.table.doLayout();等方法解决都没有用发现是自定义滚动条的问题。

解决方法：

给表格设置自定义滚动条并注意：.el-table__body-wrapper::-webkit-scrollbar 的宽高。
详细代码如下：

// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
  &::-webkit-scrollbar-track {
    background-color: #fff;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: #409eff;
  }
}
//自定义表格滚动条
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
// 滚动条样式
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #d4d5d8;
  border-radius: 5px;
}

//主要是靠这个 注意 
//上面.el-table__body-wrapper::-webkit-scrollbar 是 多少px 下面这个也要 多少px
.el-scrollbar__wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}