如何在Angular Material mat-table中通过拖拽实现行重排

嘿，这个需求我之前刚好折腾过！不用加太多额外依赖，咱们可以借助Angular CDK的DragDrop模块来实现——毕竟Angular Material本身就依赖CDK，相当于“原生支持”了，完全符合你“少加依赖”的要求。下面是具体实现步骤：

第一步：导入必要模块 #

首先在你的功能模块里导入DragDropModule，它属于Angular CDK，Material项目已经内置了，不需要额外安装包：

import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    // ...其他已导入模块
    MatTableModule,
    DragDropModule
  ]
})
export class YourFeatureModule { }

第二步：改造表格模板 #

给表格的行添加拖拽指令，同时绑定拖拽结束的处理事件：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 你的列定义示例 -->
  <ng-container matColumnDef="priority">
    <th mat-header-cell *matHeaderCellDef> 优先级 </th>
    <td mat-cell *matCellDef="let element"> {{element.priority}} </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- 关键：给行添加cdkDrag指令，绑定拖拽完成事件 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
      cdkDrag
      (cdkDragDropped)="onRowDrop($event)">
  </tr>
</table>

第三步：组件逻辑实现 #

在组件里处理拖拽完成后的数组重排，同时更新每一行的优先级字段：

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { MatTableDataSource } from '@angular/material/table';

export class YourComponent {
  displayedColumns: string[] = ['priority', 'name'];
  dataSource = new MatTableDataSource([
    {priority: 1, name: '需求A'},
    {priority: 2, name: '需求B'},
    {priority: 3, name: '需求C'}
  ]);

  onRowDrop(event: CdkDragDrop<any[]>) {
    // 1. 先在数据源数组中移动元素位置
    moveItemInArray(this.dataSource.data, event.previousIndex, event.currentIndex);
    
    // 2. 批量更新每一行的优先级值
    this.dataSource.data.forEach((item, index) => {
      item.priority = index + 1; // 优先级从1开始计数
    });
    
    // 3. 手动触发表格更新（用MatTableDataSource可省略，但保险起见加上）
    this.dataSource._updateChangeSubscription();
  }
}

可选优化：增强拖拽视觉体验 #

如果想要更贴近jQuery DataTables的拖拽手感，可以添加自定义样式：

/* 拖拽预览的行样式 */
.cdk-drag-preview {
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  background-color: #fff;
}

/* 拖拽时的占位符样式 */
.cdk-drag-placeholder {
  opacity: 0.4;
  background-color: #f5f5f5;
}

注意事项 #

• 如果你用的是自定义数据源（而非MatTableDataSource），需要确保数据源数组是可变的，并且在拖拽后主动触发变更通知，让表格刷新。
• 若数据来自后端，拖拽完成后记得把新的优先级顺序同步到后端接口，避免刷新后丢失排序。

这套方案完全基于Angular生态自带的工具，没有额外引入第三方依赖，刚好满足你的需求！

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