发表于： 2019-09-27 21:19:02
1 887
今天完成的事情：
学习angular组件库，为项目功能实现做准备。
写设计方案
明天计划的事情：
完善设计方案。
对难点功能进行demon，
遇到的问题：
angular组件库的使用。
收获：
import { moveItemInArray, CdkDragDrop } from '@angular/cdk/drag-drop';
import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-table-drag-sorting',
template: `
<nz-table [nzData]="listOfData" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody cdkDropList (cdkDropListDropped)="drop($event)">
<tr *ngFor="let data of listOfData" cdkDrag>
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
<td>{{ data.address }}</td>
</tr>
</tbody>
</nz-table>
`,
styles: [
`
::ng-deep .cdk-drag-preview {
display: table;
}
::ng-deep .cdk-drag-placeholder {
opacity: 0;
}
`
]
})
export class NzDemoTableDragSortingComponent {
listOfData = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park'
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
}
];
drop(event: CdkDragDrop<string[]>): void {
moveItemInArray(this.listOfData, event.previousIndex, event.currentIndex);
}
}
返回列表
评论