【elementUI踩坑记录】解决 el-table 固定列 el-table__fixed 导致部分滚动条无法拖动的问题

一、问题背景

在使用 Element UI 的 el-table 组件时，固定列功能虽然实用，但会引发滚动条交互问题：

• 固定列区域悬浮显示滚动条
• 但无法正常拖动滚动条

二、 问题现象

1. 列添加 fixed 属性
2. 内容超出出现滚动条  
3. 固定列区域滚动条可见但不可操作

三、核心原因

el-table__fixed 元素通过绝对定位实现：

• 默认高度 100% 覆盖整个表格
• 遮挡底层滚动条交互区域

四、解决办法

  ::v-deep .el-table .el-table__fixed {
    height: calc(100% - 14px) !important;
  }

当给 el-table 表格的列添加了 fixed属性之后，我们可以发现，被固定的部分虽然鼠标悬浮时会显示滚动条，但却无法拖动，通过修改表格固定列的高度，使固定列无法遮住滚动条，即可实现无障碍拖动。

增强方案

::v-deep .el-table {
  --scrollbar-height: 14px;
  
  .el-table__fixed, 
  .el-table__fixed-right {
    height: calc(100% - var(--scrollbar-height)) !important;
  }

  /* 无滚动条时恢复高度 */
  &.is-scrolling-none ~ .el-table__fixed {
    height: 100% !important;
  }
}

注意浏览器差异：

• Chrome/Firefox：14px

• Safari：可能略有不同

动态场景建议：

mounted() {
  const scrollbarHeight = this.$el.offsetHeight - this.$el.clientHeight;
  this.$el.style.setProperty('--scrollbar-height', `${scrollbarHeight}px`);
}

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~