vue2element表格增加固定列之后挡住滚动条样式

### 修改 Vue2 Element UI 表格固定列滚动条样式 为了改善 Vue2 中使用 Element UI 的表格组件，在添加固定列之后出现的滚动条被遮挡的问题，可以采用以下 CSS 样式调整方法： 对于 Webkit 内核浏览器（如 Chrome 和 Safari），可以通过覆盖默认样式来实现更美观且功能正常的滚动条。具体做法是在项目中的全局样式文件或者相应组件内的 `<style scoped>` 部分加入特定的选择器和属性。 针对 `.el-table` 组件内部结构，特别是带有 `__body-wrapper` 类名的部分负责展示数据行并提供水平/垂直方向上的滚动能力。因此，要定制其滚动条外观，则需定位到该元素下的伪类 `-webkit-scrollbar` 及其子项 `-webkit-scrollbar-thumb` 与 `-webkit-scrollbar-track` 来分别定义滚轮滑块及其轨道的颜色、尺寸等特性[^1]。 ```css /* 调整整个 el-table 下 body wrapper 的滚动条 */ /deep/.el-table { /deep/.el-table__body-wrapper::-webkit-scrollbar { width: 12px; height: 12px; } /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ccc !important; border-radius: 5px; } /* 确保固定列不会挡住滚动条 */ /deep/.el-table-fixed .el-table__body { padding-bottom: 12px; } } ``` 上述代码片段不仅改变了滚动条的整体视觉效果，还特别处理了由于设置了固定列而导致可能出现的内容重叠现象——即通过给固定的那一部分增加额外的底部填充(`padding-bottom`)使得即使有滚动条存在也不会影响阅读体验[^2]。 此外，如果希望进一步优化跨平台一致性，还可以考虑为 Firefox 浏览器单独指定一套规则，利用标准CSS 属性 `scrollbar-width` 控制宽度以及 `scrollbar-color` 设置颜色对比度；而对于 IE 或 Edge (旧版)，则可通过 `-ms-overflow-style:none;` 去除传统风格的滚动条显示[^3]。 最后值得注意的是，以上提到的所有 `/deep/` 操作符仅适用于 Vue CLI 版本低于 4.x 的环境当中，在更高版本里可能已被弃用或替换成了其他机制，请根据实际情况作出适当调整。