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

1.效果：

2.代码：

<template>
  <div class="app-container">
    <el-table ref="historyTable" id="historyTable" :data="tableData" style="width: 100%" border>
      <el-table-column fixed prop="date" label="组织机构代码" width="150">
      </el-table-column>
      <el-table-column fixed prop="name" label="单位名称" width="120">
      </el-table-column>
      <el-table-column prop="province" label="行政区划" width="120">
      </el-table-column>
      <el-table-column prop="city" label="行业代码" width="120">
      </el-table-column>
      <el-table-column prop="address" label="管理机构" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="统一社会信用代码" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="流动资产自年初累计(千元)" width="100">
      </el-table-column>
      <el-table-column prop="zip" label="邮编3" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编4" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编5" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编6" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编7" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编8" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编9" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编10" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编11" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编12" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编13" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编14" width="120">
      </el-table-column>
    </el-table>

  </div>

</template>

<script>
  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
        }
      },
    }
  }
</script>

<style>
</style>