通用组件-多级属性显示

src/app/view/admin/components/common-table/common-table.component.html

@@ -1,4 +1,4 @@
-<nz-card nzSize="small" [nzExtra]="refresh" [nzTitle]="title" [nzLoading]="loading">
+<nz-card nzSize="small" [nzExtra]="refresh" [nzTitle]="cardTitle" [nzLoading]="loading">
     <nz-table nzTableLayout="fixed"
               [nzData]="dataList.list"
               [nzTotal]="dataList.total"
@@ -16,17 +16,17 @@
         </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let t of dataList.list">
+        <tr *ngFor="let t of dataList.list;let index = index">
             <ng-container *ngFor="let headData of data">
                 <td *ngIf="headData.show"
                     nz-typography
                     nzEllipsis
                     nzEllipsisRows="1"
-                    [nzTooltipTitle]="headData.fieldName+' : '+t[headData.fieldValue]"
-                    nzTooltipPlacement="right"
+                    [nzTooltipTitle]="headData.isActionColumns ? null : headData.fieldName+' : '+getValue(index,headData.fieldValue)"
+                    nzTooltipPlacement="top"
                     nz-tooltip>
                     <ng-template [ngIf]="!headData.isActionColumns">
-                        {{t[headData.fieldValue]}}
+                        {{ getValue(index, headData.fieldValue) }}
                     </ng-template>
                     <ng-container *ngIf="headData.isActionColumns">
                         <a *ngFor="let action of headData.action; let i = index" (mouseenter)="action.hover(t)"
@@ -47,5 +47,5 @@
 
 
 <ng-template #refresh>
-    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()"></i>
+    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()" style="cursor: pointer"></i>
 </ng-template>

src/app/view/admin/components/common-table/common-table.component.ts

@@ -14,9 +14,12 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
 
     }
 
-    @Input() data: Data<T>[]
+    /**
+     * 设置readonly data 因为后面有使用eval 为了安全 TODO
+     */
+    @Input() readonly data: Data<T>[]
     @Input() request: RequestObj
-    @Input() title: string
+    @Input() cardTitle: string
     loading: boolean = true;
 
     dataList: PageList<T> = new PageList<T>();
@@ -51,4 +54,10 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     ngOnChanges(changes: SimpleChanges): void {
     }
 
+
+    getValue(index: number, fieldValue: string) {
+        // todo: 过滤
+        // tslint:disable-next-line:no-eval
+        return eval(`this.dataList.list[${index}].` + fieldValue);
+    }
 }