element-uiTable表格⾃定义滚动条样式踩坑及解决⽅案（设置
fixed时表格对不齐）
问题描述
element-ui Table 表格⾃定义滚动条样式踩坑 ：
当表格 设置 fixed 并且 设置 了⾃定义 滚动条时 表格 横向和纵向 都会对不齐。
1.给 表格设置 ⾃定义滚动条：
.el-table__body-wrapper::-webkit-scrollbar {
width: 30px;
height: 30px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #dddee0;
border-radius: 8px;
}
看下图：明显右边 表格出现了错位 对不齐现象
解决⽅案:
加上 .el-scrollbar__wrap::-webkit-scrollba 并且 width,height 和.el-table__body-wrapper::-webkit-scrollbar 保持⼀致 。
代码如下：
.el-table__body-wrapper::-webkit-scrollbar {
width: 30px;html横向滚动条样式
height: 30px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #dddee0;
border-radius: 8px;
}
/*
主要是靠这个注意
上⾯.el-table__body-wrapper::-webkit-scrollbar 是 30px 下⾯这个也要 30px
*/
.el-scrollbar__wrap::-webkit-scrollbar{
width: 30px;
height: 30px;
}
总结与思考:
有些 问题 是不得不看源码 才能解决 。实际上 antd-table也存在这个 问题，遇到的时候不妨，也从这个 思路尝试着解决⼀下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。