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>