大致问题就如标题所述,在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,是我在这里给表头添加双击事件时无意中引入的。我会在那篇文章里面修复这个问题。所以说上面的代码已经没有用了,这篇文章也没什么大的作用,只是记录一下自己犯过的错误罢了:(
亲测可用,暂时没发现问题。
如果有帮助请点赞,嘻嘻:)
1万+

被折叠的 条评论
为什么被折叠?



