使el-table通过操控鼠标滚轮横向滚动

1.创建directive文件夹,里面创建directive.js文件

复制代码
import Vue from 'vue';

Vue.directive('scroll-x',{
  inserted:function(el){
    let domClass = el.getAttribute('class')
    if(domClass.indexOf('el-table')<0){
      return false
    }
    const scrollDiv = el;
    if(scrollDiv==null){
      return false
    }
    scrollDiv.addEventListener('mousewheel', handler, false)
    const that = this
    function handler(event) {
      const detail = event.wheelDelta || event.detail;
      const moveForwardStep = 1;
      const moveBackStep = -1;
      let step = 0;
      if (detail < 0) {
        step = moveForwardStep * 100;
      } else {
        step = moveBackStep * 100;
      }
      let d = scrollDiv.querySelector('.el-table__body-wrapper')
      d.scrollLeft += step
    }
  }
})

2.在main.js中全局引入

import './directive/directives'
3.在vue页面中使用 v-scroll-x

<el-table

v-scroll-x

> </el-table>

相关推荐
杨艺韬3 小时前
vite内核解析-第2章 架构总览
前端·vite
我是伪码农3 小时前
外卖餐具智能推荐
linux·服务器·前端
qq_283720053 小时前
Python Celery + FastAPI + Vue 全栈异步任务实战
vue.js·python·fastapi
2401_885885043 小时前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
小李子呢02113 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
程序员buddha4 小时前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌4 小时前
ES6——Module详解
前端·ecmascript·es6
剪刀石头布啊5 小时前
原生form发起表单干了啥
前端
剪刀石头布啊5 小时前
表单校验场景,如何实现页面滚动到报错位置
前端
gyx_这个杀手不太冷静5 小时前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程