vue el-table 固定列后 鼠标滚轮 左右滚动

1.效果：

2.代码：

  
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

  




  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },
    mounted() {
      // 自己随便设置个id， el-table res="historyTable"
      this.$refs.historyTable.bodyWrapper.id = 'historyshop'
      this.scrollFunction(this.domObj, 'historyshop')
    },
    methods: {
      scrollFunction(obj, id) {
        obj = document.getElementById(id)

        if (obj.attachEvent) {
          obj.attachEvent('onmousewheel', this.mouseScroll(obj))
        } else if (obj.addEventListener) {
          obj.addEventListener('DOMMouseScroll', this.mouseScroll(obj), false)
        }
        obj.onmousewheel = obj.onmousewheel = this.mouseScroll(obj)
      },
      mouseScroll(obj, callback) {
        return function() {
          let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
          let detail, moveForwardStep, moveBackStep
          let step = 0
          if (e.wheelDelta) { // google 下滑负数： -120
            detail = e.wheelDelta
            moveForwardStep = -1
            moveBackStep = 1
          } else if (e.detail) { // firefox 下滑正数：3
            detail = event.detail
            moveForwardStep = 1
            moveBackStep = -1
          }
          // 鼠标滚轮距离
          step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
          e.preventDefault()
          obj.scrollLeft = obj.scrollLeft + step
        }
      },
    }
  }