重写el-table横向滚动条
时间: 2023-07-08 09:43:33 浏览: 120
重绘窗口滚动条
3星 · 编辑精心推荐
如果您想对 `el-table` 组件的横向滚动条进行自定义,可以按照以下步骤进行:
1. 在 `el-table` 组件中设置 `max-height` 属性,让它的高度不超过父容器的高度,这样就能出现横向滚动条。
2. 使用 `::webkit-scrollbar` 伪类样式来自定义滚动条样式,如下所示:
```css
/* 横向滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
height: 6px;
background-color: #f5f5f5;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #c1c1c1;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8;
}
```
3. 使用 `::webkit-scrollbar-track` 伪类样式来自定义滚动条轨道的样式,如下所示:
```css
.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
```
4. 最后,可以使用 `overflow-x: scroll;` 属性来控制横向滚动条是否显示,如下所示:
```css
.el-table__body-wrapper {
max-height: 300px;
overflow-x: scroll;
}
```
通过以上步骤,您就可以自定义 `el-table` 组件的横向滚动条样式了。
阅读全文