解决expand-row的on-row-click单行点击事件与鼠标长按事件冲突

解决方法

1. 原理：鼠标点击下去mousedown ——> 可能有鼠标位移mousemove ——> 鼠标松开mouseup ——> 触发 on-row-click 或者 on-click 事件

2. table设置鼠标  前面三个事件进行判断

  @mousedown.native="handleMouseDown($event)"
  @mouseup.native="handleMouseUp"
  @mousemove.native="handleMouseMove($event)"
  @on-row-click="(row, index)=>handleRowClick(row, index)"

//
 isMouseDown: false, // 点击判定
 isMouseMove: false, // 长按位移判定
 timeoutId: null,
 startX: 0, // 位移初始X点
 startY: 0, // 位移初始Y点

//

 handleRowClick(row, index) {
     // 点击事件触发时，判断当前状态是拖拽还是点击，若是拖拽，直接返回不继续执行
     if (this.isMouseMove) {
         return;
     } else {
         // 展开子行
         this.tableData.forEach((item, i)=>{ // 这个循环是为了每次只能展开一个，其他自动收起，不需要可以去掉
             i !== index ? this.tableData[i]._expanded = false : '';
         })
         this.tableData[index]._expanded = !this.tableData[index]._expanded;
         
         this.$forceUpdate();
     }
 },
 handleMouseDown(e) {
     this.isMouseDown = true;
     this.isMouseMove = false; // 初始化，位移判定

     this.startX = event.clientX;
     this.startY = event.clientY;

     this.timeoutId = setTimeout(() => { // 1. 如果点击时间过长，也算有长按位移操作
         this.isMouseMove = true;
     }, 500)
 },
 handleMouseMove(event) {
     if (this.isMouseDown) {
         let deltaX = Math.abs(event.clientX - this.startX);
         let deltaY = Math.abs(event.clientY - this.startY);

         if (deltaX > 5 || deltaY > 5) { // 2. 如果按下，且有位移，算有长按位移操作
             this.isMouseMove = true;
         } else {
             this.isMouseMove = false;
         }
     }
 },
 handleMouseUp() {
     this.isMouseDown = false;
     clearTimeout(this.timeoutId);
 },

 click事件是 mouseup 之后才触发的， 其次，isMouseMove要记得初始化，总之在判断位移前都可以。最后，判断位移才是最关键的，down 和 up 事件不是最主要的