使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>

相关推荐
pe7er18 小时前
如何阅读英文文档
java·前端·后端
先做个垃圾出来………19 小时前
Python位运算及操作
java·前端·python
daqinzl19 小时前
JavaScript连接WebSocket
javascript·websocket
梦帮科技19 小时前
第三十四篇:开源社区运营:GitHub Stars增长策略
开发语言·前端·爬虫·python·docker·架构·html
POLITE319 小时前
Leetcode 19. 删除链表的倒数第 N 个结点 JavaScript (Day 11)
javascript·leetcode·链表
time_rg19 小时前
react fiber与事件循环
前端·react.js
Mr_chiu19 小时前
告别“代码屎山”:用Cursor系统重构遗留前端项目
前端·cursor
LC同学4798119 小时前
工程化实战:uniapp基于路由的自动主题切换体系
前端
莫比乌斯环19 小时前
【安全专项】如何成为一名“火眼金睛”的安卓侦探?
前端·代码规范
LC同学4798119 小时前
深入解析:uniapp单仓库多应用(SaaS 化)架构
前端