element-ui Table 表格自定义滚动条样式踩坑及解决方案（设置fixed时表格对不齐）_崽崽的谷雨

网络投稿 02-07 520

问题描述

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也存在这个问题，遇到的时候不妨，也从这个思路尝试着解决一下。