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

想象这样一个场景：你在开发后台管理系统时，使用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`);
}

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~

❤️原创不易，期待你的关注与支持~

点赞👍+收藏⭐️+评论✍️ 😊之后我会继续更新前端学习小知识，关注我不迷路~**