最近遇到这样一个需求，要拖拽表格列名改变表格顺序，本文使用material的cdk和mat-tabble实现；

table-view.component.html：

<div class="content"> <mat-table cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="dataSource"> <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x"> {{ column.title }} </mat-header-cell> <mat-cell *matCellDef="let element">{{ element[column.name] }}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns" class="tableHeaderRow" #tableHeaderRow></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table></div>

table-view.component.css：

.content { display: flex; flex-direction: column; table { width: 100%; }}.cdk-drag-preview { box-sizing: border-box; padding: 0 15px; position: relative; } .cdk-drag-preview::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; right: 5px; border-radius: 4px; border: solid 1px rgba(0,0,0,0.4); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .cdk-drag-placeholder { color: transparent; position: relative; transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .cdk-drag-placeholder::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; right: 5px; border-radius: 4px; background: rgba(0,0,0,0.1); border: dashed 1px rgba(0,0,0,0.4); } .cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .mat-header-cell { cursor: pointer; border: dotted 3px transparent; }

table-view.component.ts：

import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';import { MatTableDataSource } from '@angular/material/table';@Component({ selector: 'app-table-view', templateUrl: './table-view.component.html', styleUrls: ['./table-view.component.scss']})export class TableViewComponent implements OnInit, OnChanges { @Input() terminals; @Input() tableLists; constructor() { } dataSource: any; displayedColumns = ['id', 'name', 'age', 'gender', 'country']; rows = [ { id: '1', name: 'John', age: '21', gender: 'Male', country: 'UK' }, { id: '2', name: 'Robin', age: '25', gender: 'Male', country: 'London' }, { id: '3', name: 'Robert', age: '12', gender: 'Male', country: 'Dubai' }, { id: '4', name: 'Neeraj', age: '23', gender: 'Male', country: 'India' }, { id: '5', name: 'Wiliiams', age: '30', gender: 'Male', country: 'Ausralia' } ]; columns: any[] = [ { name: 'id', title: 'No.' }, { name: 'name', title: 'Name' }, { name: 'age', title: 'Age' }, { name: 'gender', title: 'Gender' }, { name: 'country', title: 'Country' } ]; timePeriods = [ 'Bronze age', 'Iron age', 'Middle ages', 'Early modern period', 'Long nineteenth century', ]; ngOnInit() { this.dataSource = new MatTableDataSource(this.rows); } tableDrop(event: CdkDragDrop<string[]>) { moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex); } ngOnChanges(changes: SimpleChanges): void { } drop(event: CdkDragDrop<string[]>) { moveItemInArray(this.timePeriods, event.previousIndex, event.currentIndex); console.log(event); }}