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>