el-table 滚动条

### 解决方案 #### 自定义滚动条样式 通过覆盖默认的 `::-webkit-scrollbar` 样式可以自定义滚动条外观。以下是具体的 CSS 实现方式： ```css <style> /* 修改滚动条宽度和背景颜色 */ ::-webkit-scrollbar { width: 8px; height: 8px; background-color: #fff; } /* 修改滑块的颜色、阴影和圆角 */ ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .1); border-radius: 3px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } </style> ``` 上述代码实现了对滚动条样式的调整，具体包括宽度、高度、背景色以及滑块的视觉效果[^2]。 --- #### 功能实现：滚动条联动效果 为了实现表格头部和主体之间的滚动条联动效果，可以通过 JavaScript 手动绑定事件并同步位置。以下是一个完整的解决方案： HTML 结构保持不变： ```html <el-table :data="dataList" :class="{'opacity': dataListLoading}" height="100%" ref="singleTable" style="width: 100%;"> </el-table> ``` JavaScript 部分需要调用 `$nextTick` 方法来确保 DOM 已经渲染完成后再操作滚动条： ```javascript this.$refs["singleTable"].$nextTick(() => { const bodyWrapper = document.querySelector(".el-table__body-wrapper"); const headerWrapper = document.querySelector(".el-table__header-wrapper"); // 绑定滚动事件 bodyWrapper.addEventListener("scroll", () => { headerWrapper.scrollLeft = bodyWrapper.scrollLeft; }); }); ``` 此部分逻辑确保了当用户滚动表体时，表头也会随之水平移动，从而达到联动的效果[^1]。 --- #### 坑点处理：Dialog 中的 Table 滚动条初始化问题 如果 `el-table` 被嵌套在一个动态显示的 Dialog 或其他组件中，则需要注意其生命周期管理。由于 Dialog 初始状态可能未加载 DOM 元素，在 `mounted` 生命周期钩子中尝试访问会抛出错误。因此建议监听 Dialog 的可见性变化，并在其完全展示后再执行相关操作。 例如： ```javascript watch: { dialogVisible(newVal) { if (newVal) { this.$nextTick(() => { const bodyWrapper = document.querySelector(".el-table__body-wrapper"); const headerWrapper = document.querySelector(".el-table__header-wrapper"); bodyWrapper.addEventListener("scroll", () => { headerWrapper.scrollLeft = bodyWrapper.scrollLeft; }); }); } } } ``` 这样可以在 Dialog 显示后重新触发滚动条的相关设置[^3]。 --- ### 总结 以上分别介绍了如何通过 CSS 完成滚动条样式的自定义，利用 JavaScript 实现滚动条的联动功能，以及针对特殊场景（如 Dialog）下的注意事项。这些方法能够有效提升用户体验并满足实际开发需求。 ---