Angular基于primeng简单封装table

目的

封装个公共使用的table组件，及练习一下angular的插槽使用

开始

html

<p-table
  #dt
  [value]="tableData"
  [lazy]="true"
  [dataKey]="dataKey"
  [rowHover]="true"
  [(rows)]="rows"
  [showCurrentPageReport]="true"
  [rowsPerPageOptions]="[10, 25, 50]"
  [loading]="loading"
  [paginator]="paginator"
  [(first)]="first"
  [totalRecords]="totalRecords"
  currentPageReportTemplate="共 {totalRecords} 页"
  [filterDelay]="0"
  (onLazyLoad)="onLazyLoad($event)"
>
  <ng-template pTemplate="caption" *ngIf="title!==''">
    <div class="table-header">
      <h5 class="p-input-icon-left mb-0 flex align-items-center" > 
        <ng-content select="[titleTem]"></ng-content>
      </h5>
    </div>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let col of columns">
        <div class="flex justify-content-between align-items-center">
          {{ col.header }}
        </div>
      </th>
      <th *ngIf="hasAction">
        <div class="flex justify-content-between align-items-center">操作</div>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr class="p-selectable-row">
      <td *ngFor="let col of columns">
        {{ rowData[col.field] }}
      </td>
​
      <!-- <td class="flex flex-wrap gap-3" *ngIf="hasAction">
        <button pButton type="button" label="通过" (click)="agree($event,company)" class="p-button-text p-0"></button>
        <button pButton type="button" label="驳回" (click)="reject($event,company)" class="p-button-text p-0"></button>
        <button pButton type="button" label="删除" (click)="delete($event,company)" class="p-button-text p-0"></button>
      </td> -->
      <td class="flex flex-wrap gap-3" *ngIf="hasAction">
        <ng-container *ngTemplateOutlet="actions; context: {$implicit: rowData}"></ng-container>
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate="emptymessage">
    <tr>
      <td [attr.colspan]="columns.length+(hasAction?1:0)">暂无数据.</td>
    </tr>
  </ng-template>
</p-table>
<ng-template #actions let-item>
  <button
    pButton
    type="button"
    class="p-button-text p-0"
    *ngFor="let action of actionsList"
    (click)="executeAction($event,action, item)"
    [label]="action.label"
  >
  </button>
</ng-template>
<p-confirmPopup></p-confirmPopup>
<p-toast></p-toast>
​

ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ConfirmationService, LazyLoadEvent, MessageService } from 'primeng/api';
​
@Component({
  selector: 'app-custom-table',
  templateUrl: './custom-table.component.html',
  styleUrls: ['./custom-table.component.scss']
})
export class CustomTableComponent implements OnInit {
 
  @Input() tableData: any[] = [];
  @Input() columns: any[] = [];
  @Input() dataKey: string = 'id';
  @Input() title: string = '';
  @Input() hasAction: boolean = false;
  @Input() loading: boolean = true;
  @Input() paginator: boolean = true;
  @Input() totalRecords=0;
  @Input() actionsList: any[] = [];
  @Output() load: EventEmitter<any> = new EventEmitter();
  first=0;
  rows=10;
  constructor(
    private confirmationService: ConfirmationService,
    private messageService: MessageService
  ) {}
  executeAction(event:any,action: any, row: any) {
    action.handler(event,row);
  }
  onLazyLoad(event: LazyLoadEvent) {
    this.load.emit(event);
  }
  ngOnInit(): void {
  }
}
​

• tableData : 表格数据
• columns 列数据
• actionsList 操作列 按钮绑定，注意需要绑定this
• first 分页 （第二页 first 是1*rows）
• load()服务端分页时，调用服务器获取数据的方法

使用

html

<app-custom-table
  title="xxxx"
  [loading]="loading"
  [totalRecords]="totalRecords"
  [hasAction]="true"
  [columns]="columns"
  [tableData]="companyData"
  [actionsList]="actionsList"
  (load)="loadCompanyData($event)"
>
    <span titleTem class="flex align-items-center gap-3">
    <img
      class="h-2rem"
      src="assets/images/c-title.png"
      alt=""
    />
    xxxxx
  </span>
</app-custom-table>
​

ts

 columns = [
    {
      header: 'xxx系列',
      field: 'departmentName'
    },
    {
      header: 'xxx职称',
      field: 'address'
    },
    {
      header: 'xxx编号',
      field: 'unitCode'
    },
    {
      header: 'xxx日期',
      field: 'phoneNumber'
    }
  ]
  tableData: TraineeTitle[] = []
  actionsList = [
    { label: '查看', handler: this.view.bind(this) },
    { label: '通过', handler: this.agree.bind(this) },
    { label: '驳回', handler: this.reject.bind(this) },
    { label: '删除', handler: this.delete.bind(this) }
  ]