我们知道，el-table滚动条样式默认取的好像是我们全局滚动条的样式，当我们修改了全局滚动条的样式后，table表格的滚动条样式也随之而变。
比如，当我们修改了全局滚动条的样式，使其变得窄一点
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 滚动条样式 ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: rgb(239, 239, 239); } ::-webkit-scrollbar-thumb { background: #bfbfbf; border-radius: 10px; } |
但是，表格的滚动条也随之边的很窄，不方便用户操作，我们就要对表格进行单独的滚动条样式修改，如下
|
1 2 3 4 |
.el-table__body-wrapper::-webkit-scrollbar { width: 10px; height: 10px; } |
这样看着很完美，但是如果我们有固定列，问题又随之出现了，如下图
为啥会这样呢？ 审查一下元素，发现是动态计算的
我们再看看el-table的源码，看看他得高度是如何计算的
发现了这个变量this.gutterWidth = scrollbarWidth（），这个scrollbarWidth是什么鬼呢？我们继续追查
原来我们框架在渲染组件之前，在body中创建了一个class名为el-scrollbar__wrap的div，并获取了这个div的滚动条宽度。
找到了根原因，那么我们是不是再修改一下这个class名为el-scrollbar__wrap的div的滚动条样式，就解决了我们的问题呢？
|
1 2 3 4 5 6 |
.el-table__body-wrapper, .el-scrollbar__wrap { &::-webkit-scrollbar { width: 10px; height: 10px; } } |
果然，完美解决！
