element-ui el-table表頭向前拖拽時觸發排序事件解決方案

大致問題就如標題所述，在el-table中開啓了排序和拖拽（border）的時候，在拖拽表頭，往前拖拽調小該列的寬度時，會觸發排序事件。

解決思路很簡單：
在觸發排序事件時判斷是否來源於拖拽的副作用，如果是的話就不觸發。

在table-header.js中有一個函數handleMouseUp，直接看代碼中的註釋吧

const handleMouseUp = () => {
          if (this.dragging) {
            const {
              startColumnLeft,
              startLeft
            } = this.dragState;
            const finalLeft = parseInt(resizeProxy.style.left, 10);
            const columnWidth = finalLeft - startColumnLeft;
            column.width = column.realWidth = columnWidth;
            table.$emit('header-dragend', column.width, startLeft - startColumnLeft, column, event);

            this.store.scheduleLayout();

            document.body.style.cursor = '';
            this.dragging = false;
            this.draggingColumn = null;
            this.dragState = {};

            table.resizeProxyVisible = false;
            // 在這裏添加一個狀態，共後面click事件處理函數中判斷是否來自拖拽的副作用
            // 只有在縮小列寬時才標識
            if (column.width < startLeft - startColumnLeft) {
            	this.clickByDragging = true; // 這是我能想到的名字了，太難了
			}
          }

          document.removeEventListener('mousemove', handleMouseMove);
          document.removeEventListener('mouseup', handleMouseUp);
          document.onselectstart = null;
          document.ondragstart = null;

          setTimeout(function() {
            removeClass(columnEl, 'noclick');
          }, 0);
        };

然後在同一個文件中找到handleHeaderClick方法

 handleHeaderClick(event, column) {
 		// 直接返回
 	  if (this.clickByDragging) {
			this.clickByDragging = false;
			return;
		}
      if (!column.filters && column.sortable) {
        this.handleSortClick(event, column);
      } else if (column.filterable && !column.sortable) {
        this.handleFilterClick(event, column);
      }

      this.$parent.$emit('header-click', column, event);
    }

親測可用，暫時沒發現問題。
如果有幫助請點贊，嘻嘻:)