给element-ui的table添加自己的滚动条

element-ui的table表格的滚动条并不能满足我们实际的开发需求，特别是对于window用户来说，当表格超出屏幕范围时，每当要滑动时都需要滑到最底部才能滚动，很不方便。还有就是启用冻结效果后，滚动条被盖住的问题。本文就是为了解决这些问题，先看看实际效果。

1、效果

1、滑到底部时

2、未滑到底部时

效果还是很不错的，十分丝滑。
看了效果后直接开干吧。

2、操作流程

1、首先去除掉原有element-ui的滚动条
找到el-table__body-wrapper类，添加样式，这里也要考虑到兼容问题

.el-table__body-wrapper::-webkit-scrollbar {
    display: none;
}

.el-table__body-wrapper::-o-scrollbar {
    display: none;
}

.el-table__body-wrapper::-moz-scrollbar {
    display: none;
}

2、给需要添加滚动条的位置添加相对定位，看实际开发需求
我是放在el-table类中的，官方自带了相对定位无需自行添加。

.el-table {
    position: relative;
}

3、找到该元素并添加自己写好的滚动条组件，添加到子集的最后面

4、滚动条组件的编写
第一步写好template以及样式

dragBar是需要拖动的元素，slTableBar是容器用来定位。样式如下

5、JS代码，主要是判断何时显示滚动条、滚动条的位置、滚动条与table滚动条的联动

1. 组件加载进来时获取到需要用到的dom元素，这里注意需要在nexttick中获取才能获取到所有元素。
2. 获取到元素之后，计算所有需要用到的属性，就是元素的位置、高度、宽度等。
3. 判断当前位置是否需要显示滚动条，比较doucement的scrolltop和table-body的offsetTop即可
4. 若需要显示滚动条，则判断滚动条的位置是fixed还是absolute，若页面未到达table-body的底部则位置设置为fixed，并且left设置为固定table在窗口的x坐标以及冻结板块的宽度。否则设置为absolute，并且left设置为冻结板块的宽度。
5. 给dragBar添加鼠标点击、滑动、弹起事件，让他能够随着鼠标滑动。
6. 在让dragBar滑动时需要实时获取到鼠标移动了多少并赋值给dragBar的left，根据比例赋值给table-wrapper的scrollLeft即可。
7. 对于苹果用户，还需要添加table-wrapper的滚动事件，并根据比例把scrollLeft赋值给dragBar的left。
8. 对于table宽度会变化的情况，还需要监听table的宽度变化，并做滚动条的初始化，重新计算比例来调整滚动条的宽度以及位置。