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

相关推荐
XPoet1 天前
AI 编程工程化:Command——给你的 AI 员工编一套操作手册
前端·后端·ai编程
C_心欲无痕1 天前
前端实现文件下载的完整流程
前端·状态模式
Fighting_p1 天前
【element UI】el-select 组件下拉数据某一行文字过多时,文字换行展示,避免el-select下拉框被撑宽,导致页面过丑
前端·javascript
未来之窗软件服务1 天前
幽冥大陆(一百12)js打造json硬件管道——东方仙盟筑基期
开发语言·javascript·算法·json·仙盟创梦ide·东方仙盟·东方仙盟算法
王家视频教程图书馆1 天前
vue3从本地选择一个视频 展示到视频组件中
前端·javascript·音视频
天外来鹿1 天前
Map/Set/WeakMap/WeakSet学习笔记
前端·javascript·笔记·学习
Luna-player1 天前
前端中stylus是干嘛用的
前端·css·stylus
CHQIUU1 天前
解决 npm 全局安装 EACCES 权限问题(macOS 篇)
前端·macos·npm
程序员鱼皮1 天前
OpenClaw接入飞书保姆级教程,几分钟搞定手机养龙虾!
前端·人工智能·后端
紫_龙1 天前
最新版vue3+TypeScript开发入门到实战教程之vue3与vue2语法优劣对比
前端·javascript·typescript