Element el-table 实现鼠标拖动表格滚动

1、绑定三个鼠标事件

<template>
    <el-table
      @mousedown.native="mouseDownHandler"
      @mouseup.native="mouseUpHandler"
      @mousemove.native="mouseMoveHandler"
      ref="tableDataArea"
      width="100%">
         .....
    </el-table>
</template>

2、Js 

export default {
  data () {
    return {
       mouseFlag: false,
       mouseOffset: 0,
    }
  },
  methods: {
    // 当按下鼠标记录时鼠标位置
    mouseDownHandler(e) {
      this.mouseOffset = e.clientX;
      //this.mouseOffset = e.clientY;
      this.mouseFlag = true;    },
    mouseUpHandler(e) {
      this.mouseFlag = false;
    },
    mouseMoveHandler(e) {
      // 这里面需要注意，通过ref需要那个那个包含table元素的父元素
      let divData = this.$refs.tableDataArea.bodyWrapper;
      if (this.mouseFlag) {
        // 设置水平方向的元素的位置
        divData.scrollLeft -= (- this.mouseOffset + (this.mouseOffset = e.clientX));
        // 同理可设置垂直方向的元素的位置
        //divData.scrollTop -= (- this.mouseOffset + (this.mouseOffset = e.clientY));
      }
    },
  }
}