el-table设置滑动颜色

### 如何在 Element UI 的 `el-table` 组件中设置滚动条颜色或滑动高亮颜色 为了实现对 `el-table` 滚动条样式的自定义，可以通过覆盖默认的 CSS 样式来完成。以下是具体的实现方式： #### 1. 修改滚动条的整体样式 通过使用 WebKit 提供的伪元素 `-webkit-scrollbar` 和其子项，可以调整滚动条的外观。以下是一个完整的示例代码片段用于修改滚动条的颜色和形状。 ```css /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /* 定义滚动条宽度 */ } /deep/ .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 10px; /* 圆角半径 */ background-color: #f5f5f5; /* 背景颜色 */ } /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 10px; /* 滚动条圆角 */ background-color: #409eff; /* 滚动条颜色 */ } ``` 以上代码会改变 `.el-table__body-wrapper` 下滚动条的视觉表现[^1]。 #### 2. 实现滚动时的高亮效果 如果希望当表格内容被滚动至特定位置时触发某些交互逻辑或者高亮显示，则需结合 JavaScript 来监听滚动事件，并动态更改 DOM 元素的状态。下面是一段简单的例子展示如何检测滚动到底部并执行回调函数。 ```javascript addScrollListener(callback) { const bodyWrapper = this.$refs.tableRef.bodyWrapper; bodyWrapper.addEventListener('scroll', () => { let scrollTop = bodyWrapper.scrollTop, clientHeight = bodyWrapper.clientHeight, scrollHeight = bodyWrapper.scrollHeight; if (scrollTop + clientHeight >= scrollHeight - 10 && typeof callback === 'function') { callback(); } }); } ``` 此方法会在接近底部时调用传入的回调函数[^3]。对于更复杂的场景比如定位错误表单项的位置并通过平滑动画滚过去，可利用如下技术: ```javascript document.querySelector('.error-item').scrollIntoView({ behavior: 'smooth', block: 'center' }); ``` 这里我们假设有一个带有 class 名为`.error-item` 的节点代表有误的数据行[^2]。 --- ### 注意事项 - `/deep/` 是 Vue Loader 特有的深层作用选择器，在新版 Vue CLI 中可能已被替代为 `>>>` 或者直接移除深选需求。 - 需要确保所使用的浏览器支持这些 CSS 属性以及 JS API 功能。