Files
blog-frontEnd/src/app/view/admin/components/common-table/common-table.component.html
2020-07-11 09:39:01 +08:00

73 lines
3.2 KiB
HTML

<nz-card *ngIf="cardTitle" nzSize="small" [nzExtra]="refresh" [nzTitle]="cardTitle" [nzLoading]="loading">
<ng-container *ngTemplateOutlet="table"></ng-container>
</nz-card>
<ng-container [ngTemplateOutlet]="table" *ngIf="!cardTitle"></ng-container>
<ng-template #refresh>
<i nz-icon nzType="reload" nzTheme="outline" (click)="getData()" title="刷新" style="cursor: pointer"></i>
</ng-template>
<ng-template #table>
<ng-content></ng-content>
<nz-table nzTableLayout="fixed"
[nzData]="dataList.list"
[nzTotal]="dataList.total"
[(nzPageIndex)]="dataList.pageNum"
[nzPageSize]="dataList.pageSize"
(nzPageIndexChange)="getData()"
nzFrontPagination="false"
[nzScroll]="{x:'1300px'}"
[nzLoading]="loading">
<thead>
<tr>
<ng-container *ngFor="let data of headData">
<th *ngIf="data.show">
{{data.title}}
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let t of dataList.list;let index = index">
<ng-container *ngFor="let data of headData">
<td *ngIf="data.show"
nz-typography
nzEllipsis
[nzEllipsisRows]="data.isActionColumns?3:1"
[nzTooltipTitle]="data.isActionColumns ? null : data.title+' : '+getValue(index,data.fieldValue)"
nzTooltipPlacement="top"
nz-tooltip>
<ng-template [ngIf]="!data.isActionColumns">
<ng-template [ngIf]="template[data.fieldValue]">
<ng-container
*ngTemplateOutlet="template[data.fieldValue].temp; context:getContext(data.fieldValue,index) ">
</ng-container>
</ng-template>
<ng-template [ngIf]="!template[data.fieldValue]">
{{ getValue(index, data.fieldValue) }}
</ng-template>
</ng-template>
<ng-container *ngIf="data.isActionColumns">
<a *ngFor="let action of data.action; let i = index"
(mouseenter)="action.hover(t)"
(mouseout)="null"
[ngStyle]="{'color':action.color,'font-size':action.fontSize}"
nz-popconfirm
[nzPopconfirmTitle]="'是否确认'+action.name+'该数据?'"
[nzCondition]="!action.needConfirm"
(nzOnConfirm)="action.click(t)"
[title]="action.name">
{{action.name}}
<ng-template [ngIf]="i!=data.action.length-1">
<nz-divider nzType="vertical"></nz-divider>
</ng-template>
</a>
</ng-container>
</td>
</ng-container>
</tr>
</tbody>
</nz-table>
</ng-template>