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

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

一、元素增加三个事件

二、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));