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

相关推荐
前端小趴菜054 分钟前
Windi CSS
前端·css
榴莲omega10 分钟前
第7天:网络进阶——TCP/UDP、WebSocket、长连接
javascript·网络·tcp/ip·udp·八股
xuankuxiaoyao14 分钟前
VUE.JS 实践 第二章
前端·javascript·vue.js
毕设源码-赖学姐17 分钟前
【开题答辩全过程】以 基于Vue的电商管理平台为例,包含答辩的问题和答案
前端·javascript·vue.js
Wayward and pinnacle20 分钟前
二次封装多选框组件
前端·javascript·vue.js
咬人喵喵37 分钟前
植树节主题核心 SVG 交互玩法 + 品牌 / 账号案例 + 组件 / 教程
前端·css·编辑器·svg·e2编辑器
Sailing1 小时前
🚀AI 写代码越来越快,但我开始不敢上线了
前端·后端·面试
Alair‎1 小时前
Vue 3 基础教程:从入门到精通
前端·javascript·vue.js
百锦再1 小时前
树形数据展示:树形表格与树形控件的深度对比(Vue实现)
javascript·vue.js·ecmascript·递归·tree·data·table
Sylvia33.1 小时前
体育数据API实战:用火星数据实现NBA赛事实时比分与状态同步
java·linux·开发语言·前端·python