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

相关推荐
张人玉35 分钟前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧43 分钟前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang1 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip1 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
Orange3015112 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
lovepenny2 小时前
Failed to resolve entry for package "js-demo-tools". The package may have ......
前端·npm
超凌2 小时前
threejs 创建了10w条THREE.Line,销毁数据,等待了10秒
前端
车厘小团子2 小时前
🎨 前端多主题最佳实践:用 Less Map + generate-css 打造自动化主题系统
前端·架构·less
芒果1252 小时前
SVG图片通过img引入修改颜色
前端
海云前端13 小时前
前端面试ai对话聊天通信怎么实现?面试实际经验
前端