eltable中实现滑动鼠标滚轮表格横向滚动

首先eltable标签加上属性

ref="table"

再在methods中定义两个方法,分别是:

scrollFunction() {
    this.$refs.table.$el.addEventListener('DOMMouseScroll', this.mouseScroll(), false)
    this.$refs.table.$el.onmousewheel = this.mouseScroll()
},
mouseScroll() {
        return () => {
            let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
            let detail, moveForwardStep, moveBackStep
            let step = 0
            if (e.wheelDelta) {
                detail = e.wheelDelta
                moveForwardStep = -1
                moveBackStep = 1
            } else if (e.detail) {
                detail = event.detail
                moveForwardStep = 1
                moveBackStep = -1
            }
            step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
            e.preventDefault()
            let oldScrollLeft = this.$refs.table.$el.getAttribute('data-scroll-left')
if (Number(oldScrollLeft) + step < 4240 && Number(oldScrollLeft) + step >= 0){
   this.$refs.table.$el.setAttribute('data-scroll-left',Number(oldScrollLeft) + step)
   this.$refs.table.setScrollLeft(Number(oldScrollLeft) + step)
}

        }
    },

第二个方法中的‘4020’是表格向右移动的最大距离,需要根据实际情况进行修改,最后在mounted中调用this.scrollFunction()方法即可实现滚坤操作表格横向滚动。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值