Element el-Table allows the mouse to drag the table to scroll

1. Bind three mouse events

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

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) {/ / here we need to pay attention to, through the ref need the parent element that contains the table elements let divData = this. $refs. TableDataArea. BodyWrapper; Divdata.scrollleft -= (- this.mouseoffset + (this.mouseoffset = e.clientx)); divdata.scrollLeft -= (- this.mouseoffset + (this.mouseoffset = e.clientx)); // divdata.scrollTop -= (- this.mouseoffset + (this.mouseoffset = e.clienty)); }}}},Copy the code