网站上线准备怎么申请域名建网站
目录
- 一、问题背景
- 二、 问题现象
- 三、核心原因
- 四、解决办法
- 增强方案
- 🚀写在最后
一、问题背景
在使用 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`);
}
🚀写在最后
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~