修改 ElementUI table 组件的滚动条高度
ElementUI 的 table 组件包含很多实用的功能,其中就包含fixed
属性来固定某几列内容,使之不随滚动条滚动。但是它自带的滚动条高度只有 6px,可能某些时候并不便于用户点击拖拉。
如果我们手动改了滚动条高度,就会发现fixed
的那一列会有一部分盖在了滚动条上,十分的不美观。
.el-table {
::-webkit-scrollbar {
//整个滚动条
height: 10px;
/* 横向滚动条 高度 */
}
::-webkit-scrollbar-thumb {
// 滚动条上的滚动滑块
// background: #000 !important;
height: 10px;
}
}
这时候需要让fixed
的列在滚动条出现的时候适应我们自定义的滚动条样式
.el-table--scrollable-x {
.el-table__fixed {
bottom: 10px !important;
}
.el-table__fixed-right {
bottom: 10px !important;
}
}