我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变。 比如,当我们修改了全局滚动条的样式,使其变得
我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变。 比如,当我们修改了全局滚动条的样式,使其变得窄一点
但是,表格的滚动条也随之边的很窄,不方便用户操作,我们就要对表格进行单独的滚动条样式修改,如下
这样看着很完美,但是如果我们有固定列,问题又随之出现了,如下图 为啥会这样呢? 审查一下元素,发现是动态计算的 我们再看看el-table的源码,看看他得高度是如何计算的 发现了这个变量this.gutterWidth = scrollbarWidth(),这个scrollbarWidth是什么鬼呢?我们继续追查 原来我们框架在渲染组件之前,在body中创建了一个class名为el-scrollbar__wrap的div,并获取了这个div的滚动条宽度。 找到了根原因,那么我们是不是再修改一下这个class名为el-scrollbar__wrap的div的滚动条样式,就解决了我们的问题呢?
果然,完美解决! |
2021-04-14
2023-10-11
2021-04-29
2023-11-01
2018-01-07