当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/325411.html

相关文章:

  • 神经网络深度学习梯度下降算法优化
  • 向开发板上移植ip工具:将ip工具移植到开发板系统中
  • 数据关联_3.7
  • 总结虚函数表机制——c++多态底层原理
  • Contos7 安装 Maven
  • 对适配器模式的理解
  • 纯前端调用本机原生Office实现Web在线编辑Word/Excel/PPT,支持私有化部署
  • 双指针的详细教程
  • 【Review+预测】测试架构演进的曲折之路
  • 2015年认证杯SPSSPRO杯数学建模D题(第二阶段)城市公共自行车全过程文档及程序
  • 视频汇聚平台EasyCVR启用图形验证码之后调用login接口的操作方法
  • 【数据结构】非线性结构——二叉树
  • 数据分析POWER BI之power query
  • 【c语言】详解操作符(上)
  • VR全景展示:传统制造业如何保持竞争优势?
  • 2.7、创建列表(List)
  • solr functionquery函数查询自定义函数实现
  • 如何将 Parallels虚拟机 安装或者迁移到 移动硬盘 or U盘?
  • 大型网站集群管理负载均衡
  • JAVA使用POI实现Excel单元格合并-02
  • 深入了解 Linux 中的 MTD 设备:/dev/mtd* 与 /dev/mtdblock*
  • 2、Spring CLI安装
  • 数据库备份工具(实现数据定时覆盖)
  • 测试环境搭建整套大数据系统(十二:挂载磁盘到hadoop环境)
  • Spring事务核心:声明式事务注解式事务
  • AcWing 1015. 摘花生
  • Dalle-3、Sora、Stable Diffusion 3 掀起AIGC新浪潮
  • Unity 视频组件 VideoPlayer
  • RSTP环路避免实验(华为)
  • Arduino IDE工程代码多文件编程和中文设置