我正在设置可重新排序的表格,使用{mat-table,MatTableDataSource}但是,当我拖动一列时,我希望它具有不透明的白色背景色。能做到吗?示例图片链接: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>
您可以简单地将自定义样式添加到拖动列表中。<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;
}
这只是示例样式,您必须根据需要对其进行调整。
有关更多示例,请参见here
[cdkDropList
和cdkDrag
也不应位于同一元素上。
将cdkDropList
设置为<th>
,将cdkDrag
设置为<td>