Vue使用汇总之el-table实现鼠标拖动表格滚动

有时候我们需要在Element-UI中实现这样的一个效果，鼠标水平拖动，表格也水平滚动，这样可以隐去滚动条！

一、元素增加三个事件

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

二、Js

export default {
	data () {
  	return {
    	 mouseFlag: false,
       mouseOffset: 0,
    }
  },
  methods: {
    // 按下鼠标记录鼠标位置
  	mouseDownHandler(e) {
      this.mouseOffset = e.clientX;
      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));
      }
    },
  }
}

三、扩展

如果还想实现锤直方向的滚动，也简单和水平的一样，我们主要控制scrollTop 这样就可以！

divData.scrollTop -= (- this.mouseOffset + (this.mouseOffset = e.clientY));