我要评论我们知道，el-table滚动条样式默认取的好像是我们全局滚动条的样式，当我们修改了全局滚动条的样式后，table表格的滚动条样式也随之而变。
比如，当我们修改了全局滚动条的样式，使其变得窄一点
// 滚动条样式
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: rgb(239, 239, 239);
}
::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
但是，表格的滚动条也随之边的很窄，不方便用户操作，我们就要对表格进行单独的滚动条样式修改，如下
.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的滚动条样式，就解决了我们的问题呢？
.el-table__body-wrapper, .el-scrollbar__wrap {
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
}
果然，完美解决！
到此这篇关于el-table滚动条样式修改的文章就介绍到这了,更多相关el-table滚动条样式内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论