目录

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
多多米10053 分钟前
Vue3项目自定义全局防抖节流
前端·javascript·vue.js·typescript
大樊子16 分钟前
小程序的生命周期
前端·小程序
b哦哈嘻w32 分钟前
Table类型的表单
开发语言·javascript·ecmascript
Mintopia34 分钟前
Nodejs第四天,身份认证
前端·javascript·node.js
Kagol1 小时前
🎉TinyVue v3.22.0 正式发布:支持深色模式、增加基于 UnoCSS 的图标库、支持更丰富的 TypeScript 类型声明
前端·vue.js·开源
sen_shan1 小时前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
天天扭码1 小时前
一分钟解决 | 高频面试题——找到字符串中所有字母异位词
前端·算法·面试
Mintopia1 小时前
Three.js 第四天几何体顶点组设置
前端·javascript·three.js
小菜刀刀1 小时前
XSS跨站脚本攻击漏洞
开发语言·前端·javascript
星空寻流年1 小时前
css3新特性第四章(渐变)
前端·javascript·css3