el- table 滚动条样式修改

### 修改 Element UI `el-table` 组件的滚动条样式 为了实现对 `el-table` 的滚动条样式的自定义，可以通过覆盖默认的 CSS 样式来完成。以下是具体方法： #### 方法一：通过全局 SCSS 文件修改 如果希望在整个项目中统一应用新的滚动条样式，则可以在项目的全局 SCSS 文件（如 `_variables.scss` 或者类似的文件）中添加以下代码[^1]。 ```scss /* 自定义滚动条样式 */ .el-table__body-wrapper::-webkit-scrollbar { width: 10px !important; /* 定义滚动条宽度 */ } /* 滑动轨道样式 */ .el-table__body-wrapper::-webkit-scrollbar-track { background-color: #f1f1f1; border-radius: 5px; } /* 滑块样式 */ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } /* 鼠标悬停滑块时的效果 */ .el-table__body-wrapper::-webkit-scrollbar-thumb:hover { background-color: #555; } ``` 上述代码会作用于所有的 `.el-table__body-wrapper` 元素，从而影响整个项目中的表格滚动条样式。 --- #### 方法二：局部调整滚动条样式 如果只需要针对某个特定页面或者组件内的 `el-table` 进行样式定制，可以采用更具体的类名绑定方式[^2]。 HTML 结构示例如下： ```html <el-table :data="dataList" class="custom-scroll" height="100%" ref="singleTable" style="width: 100%;" > </el-table> ``` 对应的 SCSS 样式如下： ```scss .custom-scroll ::v-deep(.el-table__body-wrapper)::-webkit-scrollbar { width: 10px; /* 定义滚动条宽度 */ } .custom-scroll ::v-deep(.el-table__body-wrapper)::-webkit-scrollbar-track { background-color: #eaeaea; border-radius: 5px; } .custom-scroll ::v-deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 5px; } .custom-scroll ::v-deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover { background-color: #777; } ``` 注意，在 Vue 中使用 `::v-deep` 可以穿透 scoped CSS 的限制，确保样式能够正确应用于子组件内部的 DOM 节点。 --- #### 方法三：动态设置滚动条高度 对于某些特殊需求，可能还需要动态调整滚动条的高度或其他属性。此时可以借助 JavaScript 来操作 DOM[^2]。 示例代码如下： ```javascript this.$refs.singleTable.$nextTick(() => { const bodyWrapper = document.querySelector('.el-table__body-wrapper'); if (bodyWrapper) { bodyWrapper.style.setProperty('--scrollbar-height', '10px'); // 动态设置变量 } }); ``` 配合 CSS 变量的方式： ```css :root { --scrollbar-width: 10px; --scrollbar-height: 10px; } .el-table__body-wrapper::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-height); } ``` 这种方法更加灵活，适合需要根据不同条件动态变化的情况。 --- ### 总结 以上三种方法分别适用于不同的场景： - **全局样式** 使用 SCSS 文件直接覆盖默认样式； - **局部样式** 利用 `::v-deep` 和额外的类名限定范围； - **动态调整** 借助 JavaScript 实现运行时的变化。 无论哪种方式，都需要确保浏览器支持 `-webkit-scrollbar` 属性以及相关伪元素的选择器。