给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的宽度变化,并做滚动条的初始化,重新计算比例来调整滚动条的宽度以及位置。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值