问题描述
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 注释掉就可以 复现了。kelement-ui Table 表格自定义滚动条样式踩坑及解决方案(设置fixed时表格对不齐)--在线运行https://codepen.io/guyu521/pen/jOGwxmohttps://codepen.io/guyu521/pen/jOGwxmohttps://codepen.io/guyu521/pen/jOGwxmo
解决方案:
加上 .el-scrollbar__wrap::-webkit-scrollba 并且 width,height 和.el-table__body-wrapper::-webkit-scrollbar 保持一致 。
代码如下:
.el-table__body-wrapper::-webkit-scrollbar {
width: 30px;
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;
}
这个问题 是我无意间 刷dou音 看到的觉得 解决的思路 很新颖,给了我 启发开拓了我的思路。所以决定 亲自试试,经过验证 确实 有用。https://v.douyin.com/8JgQgqT/ el-table 错位 问题 视频 讲解 及 解决思路https://v.douyin.com/8JgQgqT/ https://v.douyin.com/8JgQgqT/%C2%A0
总结与思考:
有些 问题 是不得不看源码 才能解决 。实际上 antd-table也存在这个 问题,遇到的时候不妨,也从这个 思路尝试着解决一下。