使el-table通过操控鼠标滚轮横向滚动

本文主要是介绍使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>

这篇关于使el-table通过操控鼠标滚轮横向滚动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---