目錄
- 一、問題背景
- 二、 問題現象
- 三、核心原因
- 四、解決辦法
- 增強方案
- 🚀寫在最后
一、問題背景
在使用 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`);
}
🚀寫在最后
希望我的分享能夠幫助到更多的人，如果覺得我的分享有幫助的話，請大家一鍵三連支持一下哦~
??原創不易，期待你的關注與支持~
點贊👍+收藏??+評論??
😊之后我會繼續更新前端學習小知識，關注我不迷路~
