vue3 eltable 表格滚动条样式
时间: 2025-01-21 12:59:13 浏览: 51
### 修改 Vue3 中 Element Plus 的 ElTable 组件表格滚动条样式
为了自定义 `el-table` 组件中的滚动条样式,在 CSS 或者 SCSS 文件中可以利用 WebKit 浏览器特有的伪类来实现。对于基于 Chromium 内核的浏览器,可以通过 `-webkit-scrollbar` 及其相关属性来自定义滚动条外观。
#### 定义全局或局部滚动条样式
如果希望仅针对特定组件内的表格应用定制化的滚动条效果,则可以在该组件对应的 `<style scoped>` 标签内编写如下代码:
```css
/* ---滚动条公共样式--- */
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 定义滚动条轨道 */
.el-table__body-wrapper::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 2px;
background-color: #f7f7f7;
}
/* 定义滑块 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
background-color: #cfdbea;
}
```
上述代码片段通过 `.el-table__body-wrapper` 类名限定作用范围,确保只影响到目标表格内部的滚动条[^3]。
另外需要注意的是,由于不同版本之间可能存在差异以及未来更新可能会引入变化,建议定期查阅最新文档以获取最准确的信息[^1]。
阅读全文
相关推荐















