编写通用组件

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

@@ -0,0 +1,25 @@
+<nz-table>
+    <thead>
+    <tr>
+        <td *ngFor="let headData of data">
+            {{headData.fieldName}}
+        </td>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td *ngFor="let headData of data">
+            <ng-template [ngIf]="!headData.isActionColumns">
+                {{headData.fieldName}}
+            </ng-template>
+            <ng-template *ngIf="headData.isActionColumns">
+                <a *ngFor="let action of headData.action" (mouseenter)="action.hover(headData)" (mouseout)="null"
+                   (click)="action.click(headData)" [ngStyle]="{'color':action.color,'font-size':action.fontSize}">
+                    {{action.name}}
+                </a>
+            </ng-template>
+        </td>
+    </tr>
+
+    </tbody>
+</nz-table>

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

@@ -0,0 +1,19 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Data} from './data';
+
+@Component({
+    selector: 'app-common-table',
+    templateUrl: './common-table.component.html',
+    styleUrls: ['./common-table.component.less']
+})
+export class CommonTableComponent<T> implements OnInit {
+
+    constructor() {
+    }
+
+    @Input() data: Data<T>[]
+
+    ngOnInit(): void {
+    }
+
+}

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

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CommonTableComponent} from './common-table.component';
+import {NzTableModule} from "ng-zorro-antd";
+
+
+@NgModule({
+    declarations: [
+        CommonTableComponent
+    ],
+    imports: [
+        CommonModule,
+        NzTableModule
+    ]
+})
+export class CommonTableModule {
+}

src/app/view/admin/components/common-table/data.d.ts

@@ -0,0 +1,15 @@
+export class Data<T> {
+    fieldName: string;
+    fieldValue: string;
+    show: boolean;
+    bindData?: T;
+    isActionColumns: boolean;
+    action: {
+        name: string,
+        color: string,
+        order: number,
+        fontSize: string,
+        click: (data: T) => void,
+        hover: (data: T) => void;
+    }[]
+}