点击上下按钮实现Mat List行重排序的无拖拽实现方案咨询

核心结论 #

仅通过按钮完全可以实现该功能，无需引入cdk/drag-drop或其他第三方包。目前市面虽有少量封装好的列表排序工具包，但该需求逻辑非常简单，自行实现更新数组序列同步视图的成本远低于引入第三方包的适配成本，这也是无拖拽场景下的最优实现方式，额外依赖反而会增加项目冗余。

具体实现步骤 #

Angular 视图是数据驱动渲染的，只要修改*ngFor绑定的源数组顺序，视图会自动同步更新，完整实现逻辑如下：

• 第一步：给Mat List绑定渲染用的源数组，给*ngFor加上trackBy优化渲染性能，避免不必要的行重绘

<mat-list>
  <mat-list-item *ngFor="let item of listData; let i = index; trackBy: trackByItemId">
    <span class="item-content">{{item.content}}</span>
    <!-- 上移按钮，第一行禁用 -->
    <button mat-icon-button (click)="moveUp(i)" [disabled]="i === 0">
      <mat-icon>arrow_upward</mat-icon>
    </button>
    <!-- 下移按钮，最后一行禁用 -->
    <button mat-icon-button (click)="moveDown(i)" [disabled]="i === listData.length - 1">
      <mat-icon>arrow_downward</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

• 第二步：在TS文件中实现上下移动的数组操作逻辑，核心是交换对应索引位置的数组元素

interface ListItem {
  id: number;
  content: string;
}

@Component({
  // 组件基础配置省略
})
export class YourComponent {
  listData: ListItem[] = [
    {id: 1, content: '测试行1'},
    {id: 2, content: '测试行2'},
    {id: 3, content: '测试行3'},
  ];

  // 上移逻辑
  moveUp(index: number): void {
    if (index < 1) return;
    // 数组解构交换两个位置的元素
    [this.listData[index], this.listData[index - 1]] = [this.listData[index - 1], this.listData[index]];
    // 若需要持久化排序，此处可调用后端接口同步最新顺序
  }

  // 下移逻辑
  moveDown(index: number): void {
    if (index >= this.listData.length - 1) return;
    [this.listData[index], this.listData[index + 1]] = [this.listData[index + 1], this.listData[index]];
    // 若需要持久化排序，此处可调用后端接口同步最新顺序
  }

  // trackBy优化，避免数组变更导致全量重绘列表
  trackByItemId(index: number, item: ListItem): number {
    return item.id;
  }
}

方案优势 #

• 无额外依赖：基于Angular原生数据驱动特性实现，不需要引入任何第三方包，打包体积更小
• 逻辑可控：可以灵活控制移动边界、操作权限，也可以方便插入排序持久化、操作回调等自定义逻辑
• 性能优异：仅修改数组对应位置元素，配合trackBy使用不会产生全量列表重绘，性能远高于引入第三方包的实现

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