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);
    }

好可怕,今天又重新审视了一下代码,发现element ui本身没这个问题。我查了小半天才找到原因,是自己的坑,自己的坑,自己的坑,重要的事情说三遍,我不该误会element ui!

之所以引入这个bug,是我在这里给表头添加双击事件时无意中引入的。我会在那篇文章里面修复这个问题。所以说上面的代码已经没有用了,这篇文章也没什么大的作用,只是记录一下自己犯过的错误罢了:(

亲测可用,暂时没发现问题。
如果有帮助请点赞,嘻嘻:)

你可能感兴趣的:(前端之路)