懒写的了 直接上代码了！

主要是带缓动功能！

缓动效果主要原理是每次滚动的距离是剩下的距离除以速率，速率rate可自行传递

scrollLeft + step  / rate

我下一秒的位置 = 现在位置 + 现在距离的一半

1、新增指令方法

目录 /src/directive/tableScroll/

新增index.js文件

import scrollx from './scrolls'

const install = function(Vue) {
  Vue.directive('scrollx', scrollx)
}

if (window.Vue) {
  window['scrollx'] = scrollx
  Vue.use(install); // eslint-disable-line
}

scrollx.install = install
export default scrollx

新增scrolls.js文件

// // rate滚动的速度 数字越大滚动越慢
    const mouseScroll = (obj,rate=20, callback) => {
      
    return function () {
      let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
    
      e.preventDefault()
      let detail // 浏览器滚动步数
      let step = 0 // 实际需要滚动的步数
     
      if (e.wheelDelta) { // google 下滑负数： -120
        detail = e.wheelDelta
      } else if (e.detail) { // firefox 下滑正数：3
        detail = e.detail
      }

      step = detail * -1 // 实际需要滚动的步数
      let scrollLeft = obj.scrollLeft // 当前的滚动距离
      let maxleft=obj.scrollLeft+ step // 最大滚动到的距离

      var funTop = function () {
        scrollLeft = scrollLeft + step  / rate; //计算每次滚动的距离
        // 临界判断，终止动画
        if ( Math.abs(maxleft-scrollLeft) <= 1) {
          obj.scrollLeft = scrollLeft;
          callback && callback();
          return;
        }
        obj.scrollLeft = scrollLeft;
        // 动画gogogo!
        requestAnimationFrame(funTop);
      };
      funTop()
    }
}
    const addv= (el, binding, vnode) => {
        const {value}=binding // 滚动的速率
        console.log(value)
        const obj=vnode.componentInstance.$refs.bodyWrapper //document.getElementById('historyshop')
         try{
           obj.addEventListener('DOMMouseScroll', mouseScroll(obj,value), false)
          }catch(err){
           
           obj.attachEvent('onmousewheel', mouseScroll(obj,value))
          }
          obj.onmousewheel = obj.onmousewheel = mouseScroll(obj,value)
    }
export default {
    bind(el, binding, vnode) {
        addv(el, binding, vnode)
    },
    inserted(el, binding, vnode) {
        addv(el, binding, vnode)
    },
    unbind(el) {
     el.removeEventListener('DOMMouseScroll',mouseScroll)
    }
  }

2、main.js引入文件

main.js 文件

import scrollx from '@/directive/tableScroll/index.js'
Vue.directive('scrollx', scrollx)

3、使用方法

只需要在有横向滚动条的table 添加v-scrollx即可

    <el-table
      :data="tableData"
      v-scrollx
    >

如果需要调节滚动的速度，即可

 v-scrollx="100"  // 值越大速度越慢 默认20