如何阻止Vuetify表格非Vue渲染手柄的点击事件冒泡触发排序？

核心问题是拖动列宽时，鼠标移出handle后释放，表头的点击事件会触发排序，而handle上的stopPropagation()只能处理鼠标在handle上的情况。以下是不需要覆盖表头插槽的解决方案：

步骤1：跟踪列宽调整状态 #

在组件的data中添加状态变量，标记当前是否正在调整列宽：

data() {
  return {
    isResizing: false,
    // 其他原有数据...
  }
}

步骤2：绑定拖动事件并更新状态 #

在mounted钩子中初始化handle的鼠标事件，拖动开始时标记状态，结束时重置：

mounted() {
  this.initResizeHandlers();
  this.blockSortDuringResize();
},
methods: {
  initResizeHandlers() {
    const handles = document.querySelectorAll('.resize-handle');
    handles.forEach(handle => {
      handle.addEventListener('mousedown', (e) => {
        e.stopPropagation(); // 处理鼠标在handle上点击的情况
        this.isResizing = true;
        
        // 绑定全局鼠标事件（保留原有拖动逻辑）
        document.addEventListener('mouseup', this.endResize);
        document.addEventListener('mousemove', this.handleColumnResize);
      });
    });
  },
  endResize() {
    this.isResizing = false;
    // 移除全局事件监听
    document.removeEventListener('mouseup', this.endResize);
    document.removeEventListener('mousemove', this.handleColumnResize);
  },
  handleColumnResize(e) {
    // 你的列宽调整逻辑...
  },

步骤3：阻止调整期间的表头排序 #

在表头的点击事件捕获阶段拦截，当处于调整状态时阻止排序触发：

blockSortDuringResize() {
    const tableHead = document.querySelector('.v-table thead');
    tableHead.addEventListener('click', (e) => {
      if (this.isResizing) {
        e.stopPropagation();
        e.preventDefault();
      }
    }, true); // 使用捕获阶段，确保在Vuetify的排序事件之前执行
  }
}

原理说明 #

• 通过isResizing标记覆盖鼠标移出handle的场景，判断当前是否在进行列宽调整。
• 利用事件捕获机制，在Vuetify表头排序事件触发前拦截，阻止其执行。
• 无需修改表头插槽，完全通过原生事件监听实现冲突解决。

内容的提问来源于stack exchange，提问作者darkbasic