el-table自定义滚动条大小后出现错位
这是一个小伙伴发来的demo
事实上这个问题已经解决了
我们今天来重现一遍解决的过程
因为最终采用的方法
是：不读源码怎么也发现不了的方法
好我们来试一下
首先呢我们把它解压一下
然后呢他只有一个html文件
我们就把它放在一个目录里
叫个：demo吧
然后呢把它放进来
然后我们用 vscode 打开
好然后呢
用 live-server 把它跑起来就行了
这是一个饿了么 ui 的
el-table
这个小伙伴修改了默认滚动条的大小
那他遇到的问题是什么呢
就是当这个表格有
左右的浮动列的时候
比如操作
然后呢滚动条滚动到最后的时候
大家看
他这个表头和内容不对齐
包括他滚动到下面
大家看！每一行也不对齐了
那熟悉el-table的同学都知道
el-table为了做这种浮动列
他会把
表格做成好几个部分
大家看一下把这放大一点
大看他把表格做了几个大的 div
一个是...body-wrapper
这就是真实的表格数据
上面还有一个表头
就说表头为了浮动
在这他单独做了个 div
里边放了个表格
然后又单独做了个 div
里边放了一个内容的表格
然后他又做了两个浮动的
一个是左侧的一个是右侧的
大家看！好再往下先不管它
我们先看左右浮动的这个
我们先把右侧的删掉
大家看！这个滚动其实不对齐就是他
右侧的浮动
这一列和表格真实的内容没有对齐
那我们就可以猜测我们在
滚动的时候他肯定是用 js 来控制
右侧跟着一起滚动
我们把javascript禁用
试一下
再滚动，大家看
左右都不滚动了
这就说明他实现的原理是依赖于：javascript
监测：我们中间这个主表格
滚动
然后呢他去控制两边的固定列的滚动
然后基于这个原理
如果我们修改了滚动条的大小
那么我们在滚动的时候
就会出现刚才那种不对齐的情况
那为什么呢？ （我先把加速恢复恢复一下）
那我们仔细观察应该他差的这一点
高度就是一个滚动条的高度
我们试一下
现在是10我们把它都改成30
打开我们把它滚动到最下面
我们试一下
我们这样试吧
大家看正好是这么多差不多
那到这里呢我就想到另外一个问题
就是我现在用的是Mac系统
Mac系统如果不
设置滚动条的大小的话
默认滚动条是隐藏的
大家看
只有我在滚动的时候他会显示出来
所以呢
他往下滚动他不会出现这种问题
但是windows默认不是这样的
他默认都是显示一个条在这的
我们用windows看一下这个效果
好我们打开浏览器
（172）就这个
大家看
我现在没有设置滚动条自定义的样式
他是有一块滚动条在这的
所以到这的话就有点意思了
也就是说同样是el-table
他在 windows 下和在Mac下
展现形式是不一样的
我们可以验证一下我们把中间这个
主表删掉
检查一下
就这个大的wrapper我们把它删掉
大家看他两边浮动的地方
他是让出来这么一点
也就是说：他把滚动条的大小让出来了
我们再去Mac下也是把这个大表删掉
大家看在Mac下
他就没有让出来这一点
我们再看windows
而且windows这一块他也让出了一点
滚动条的宽度大家看
Mac下是没有的
所以这就是我们的突破点
我们就找一下
他是怎么把这一点让出来的
然后呢
当我们修改了滚动条的样式以后
也想办法让他可以让出来
我们修改后的宽度就可以了
大家看这个div
就是刚才我说的后面两个先不管的
其中有一个叫这个
el-table-fixed-right-patch
我们再看 mac
mac 也有这个 table
但是它的宽度是0
那同样代码它在windows下呢
它的宽度就是17像素
我们就以它为突破点
我们去搜一下源代码
复制然后呢我们随便打开一个
vue的项目
去 node_modules 里去找到这个
饿了么 ui
element-ui
然后找到package
然后找到table
在这
table.vue
然后呢我们在这里搜一下这个
大家看这个表格
那他的宽度是什么呢
他看有没有纵向滚动条
有的话他的宽度是layout.gutterWidth
所以呢我们找一下 layout
layout 怎么来的
加空格
在这：TableLayout
那TableLayout怎么来的
在这
打开 table-layout.js
然后呢他用到了这里边的gutterWidth
我们找一下
在这：gutterWidth
又调（用）了这个方法，我们再找这个方法
然后这个方法又引
用了这个文件
我们再把这个文件找到
这个文件里
就这一个方法
function
最终返回这个宽度
我们看他怎么写的哈
我把这个隐藏掉
首先呢他创建了一个 div
名字叫outter
然后outter指定到一个样式
然后把它隐藏起来
宽度等于100
绝对定位
然后呢
放到了一个我们看不到的地方
把它插入到文档里
接着他获取到了这个 div 的宽度
然后强制让这个 div 出现滚动条
overflow = 'scroll'
接着创建一个 inner div
宽度等于百分之百
然后把 inner 放到 outter 里边
然后呢获取到inner的宽度
再把outter删掉
他用outter的宽度减inner的宽度
从而获取到滚动条的默认宽度
什么意思呢
他先创建了一个 div
这个 div 100像素
然后呢
他强制让这个 div 出现滚动条
比如滚动条这么宽
接着呢他下边我们就不不画了哈
因为下边不重要
接着呢他又创建了一个 div
他把这个 div 放到这个
大的 div 里面
是这样的
好这时候他怎么获取滚动条宽度呢
他让这个大的点位的总宽度
减去
小的这个点位的总宽度
比如说刚才看到的
最终得出17像素就这么来的
所以呢我们根据他这个
元代码就很容易找到切入点
我们要想办法让他这个方法执行
到最后拿到的这个
宽度
是我们修改后样式的自定义的宽度
怎么改啊
我们要改这个 div 的样式
我们试一下
把它先恢复回来
这个样式的
我们把它
都复制过来
都是30好
再看一下效果
大家看对齐了
再往下
也对齐了
再看 windows
对齐了
都对齐了
所以总结一下
如果以后我们想修改 el-table 的
滚动条的宽度
那一定要加上这个样式好
今天就到这里谢谢大家
最后更新于
这有帮助吗？