如何在拖动时修复数据表中表头的设计

Question

我正在设置可重新订购的 table，使用 { mat-table , MatTableDataSource } 但是当我拖动一列时，我希望它的位置具有不透明的白色背景色。这可以做到吗？示例图片 link : https://imgur.com/taDJF17

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" cdkDropListGroup *ngIf="Loaded">
   <ng-container [matColumnDef]="column" *ngFor="let column of columnsWithoutSelect; let i = index" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header  cdkDropList
                        cdkDropListLockAxis="x"
                        cdkDropListOrientation="horizontal"
                        (cdkDropListDropped)="dropListDropped($event, i)"
                        cdkDrag
                        (cdkDragStarted)="dragStarted($event, i)"
                        [cdkDragData]="{name: column, columIndex: i}"> {{headsColumns[column]}} </th>

                        <td mat-cell *matCellDef="let element" [ngClass]="stateRow ? 'td-min-1': 'td-min-2'"  > {{element[column]}} </td>
                    </ng-container>
</table>

Answer 1

您只需将自定义样式添加到拖动列表即可。
<th mat-header-cell class="drop-list

css

.drop-list{
  width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

This are just examples styles you have to adjust them to fit your needs.

有关更多示例，请参阅 here

此外 cdkDropList 和 cdkDrag 不应在同一元素上。

将 cdkDropList 设置为您的 <th> 并将 cdkDrag 设置为您的 <td>

如何在拖动时修复数据表中表头的设计

How to fix the design of the Header on dataTable while Draging

javascript

angular-material

material-ui

angular-datatables

angular