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

相关推荐
daols88几秒前
vue甘特图vxe-gantt实现点击任务条弹出编辑表单
前端·vue.js·甘特图·vxe-gantt
zfyljx3 分钟前
Taro+react input框在文字中间插入光标会跳到末尾问题
javascript·react.js·taro
Fairy要carry4 分钟前
项目05-手搓Agent之任务通信+任务编排的实现
服务器·前端·网络
忘忧记4 分钟前
pytest进阶参数化用法
前端·python·pytest
予你@。17 分钟前
vue 使用html2canvas + jsPDF 将html导出为pdf (延伸问题)
vue.js·pdf·html
github_czy19 分钟前
FastAPI 流式响应核心原理解析(含前端断开感知)
前端·fastapi
Lana学习中19 分钟前
[AI编程]纯前端JS实现评论区自动截图&生成 PDF
前端·javascript·pdf·vibe coding
鹏程十八少22 分钟前
7. Android Shadow插件化原理深挖(下):Transform字节码插桩与“零Hook”的底层实现与宿主通信全流程
android·前端·面试
The_era_achievs_hero24 分钟前
Flex布局属性
前端
Z_Wonderful25 分钟前
npm -v无效PowerShell 的执行策略,解决方案
前端·npm·node.js