调整 table 列大小时防止排序触发

Question

在使用可调整大小的组件调整列大小时，如何防止在 table 列上触发排序？当 mouseup 事件发生在正在调整大小的 th 上时，它会触发排序。我试图在 nzResizeEnd 事件中阻止它，但我想那已经太晚了。有谁可以帮助我吗？示例 https://stackblitz.com/edit/angular-jqs53u?embed=1&file=src/app/app.component.ts

去图书馆回购中提交问题，有人已经在 11 天前提交了。让我们希望快速修复。 https://github.com/NG-ZORRO/ng-zorro-antd/issues/5199

Answer 1

您可以在 table header 上执行以下操作（删除了不重要的代码）：

<th 
  [nzShowSort]="!resizing"
  (nzResizeStart)="resizing = true"
  (nzResizeEnd)="resizing = false"
>

组件 ts:

resizing: boolean = false;

working example

这将在调整大小时禁用排序，并re-enable完成后

Answer 2

通过在调整大小时禁用指针事件解决了这个问题。

Component.ts: resizing: boolean = false;

模板：

<th 
  [class.pointer-events-none]="resizing"
  (nzResizeStart)="resizing = true"
  (nzResizeEnd)="resizing = false"
>

风格：

.pointer-events-none {
  pointer-events: none;
}

stackblitz表示工作状态。现在调整大小不会导致排序方向发生变化。

在另一个 .

中发现了关于 css pointer-events

还要感谢您Poul Kruijt的帮助。

调整 table 列大小时防止排序触发

Prevent sort trigger on a table column when resizing it

angular

ng-zorro-antd