bixi/packages/core/table/table.component.html

企业级中后台前端解决方案

<nz-table
  #table
  [nzData]="_rows"
  [nzLoading]="loading"
  [nzScroll]="scroll"
  [nzFrontPagination]="frontPagination"
  [nzPageSizeOptions]="pageSizeOptions"
  [nzShowPagination]="true"
  [nzHideOnSinglePage]="true"
  [nzShowSizeChanger]="true"
  [nzTotal]="pagination.total"
  [(nzPageSize)]="pagination.pageSize"
  [nzPageIndex]="pagination.page"
  [nzFooter]="showFooter ? footerTpl : null"
  (nzPageSizeChange)="onPageSizeChange($event)"
  (nzPageIndexChange)="onPageChange($event)"
>
  <thead>
    <tr>
      <ng-container *ngFor="let col of _cols">
        <ng-container *ngIf="!col.nameRef">
          <ng-container *ngIf="col.type !== 'checkbox'">
            <th
              *ngIf="col.visible"
              [nzWidth]="col.width"
              [nzShowFilter]="!!col.filter"
              [nzFilterMultiple]="!!col.filter?.multiple"
              [nzFilters]="col.filter?.options || []"
              [nzShowSort]="!!col?.sort"
              [nzSortOrder]="col.sort?.direction"
              [nzLeft]="col._left ? col._left : false"
              [nzRight]="col._right ? col._right : false"
              (nzSortOrderChange)="onSortChange(col.sort?.key || col.key, $event)"
              (nzFilterChange)="onFilterChange(col.filter?.key || col.key, $event)"
            >
              {{ col.name }}
              <i
                *ngIf="col.titleTipContent"
                nz-icon
                [nzType]="col.titleTipIcon ? col.titleTipIcon : 'question-circle'"
                nzTheme="outline"
                nz-tooltip
                [nzTooltipTitle]="col.titleTipContent"
              ></i>
            </th>
          </ng-container>
          <ng-container *ngIf="col.type === 'checkbox'">
            <th
              *ngIf="col.visible"
              nzShowCheckbox
              [nzWidth]="col.width"
              [nzShowRowSelection]="col.selectionList && col.selectionList.length > 0"
              [nzSelections]="col.selectionList"
              [nzIndeterminate]="isIndeterminate"
              [(nzChecked)]="isAllRowsChecked"
              [nzLeft]="col._left ? col._left : false"
              [nzRight]="col._right ? col._right : false"
              (nzCheckedChange)="onSelectAll($event)"
            ></th>
          </ng-container>
        </ng-container>
        <ng-container *ngIf="col.nameRef">
          <th>
            <bixi-table-col-template-header [col]="col"></bixi-table-col-template-header>
          </th>
        </ng-container>
      </ng-container>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of table.data; index as index">
      <ng-container *ngFor="let col of _cols" [ngSwitch]="col.type">
        <td
          [hidden]="!col.visible"
          [nzLeft]="col._left ? col._left : false"
          [nzRight]="col._right ? col._right : false"
          [class.ant-table-cell-fix-right-first]="col._rightFirstFixed"
          [class.ant-table-cell-fix-left-last]="col._leftLastFixed"
        >
          <ng-container *ngSwitchCase="'link'">
            <bixi-table-col-link [configVersion]="configVersion" [row]="row" [col]="col" [index]="index"></bixi-table-col-link>
          </ng-container>
          <ng-container *ngSwitchCase="'time'">
            <bixi-table-col-time [configVersion]="configVersion" [row]="row" [col]="col" [index]="index"></bixi-table-col-time>
          </ng-container>
          <ng-container *ngSwitchCase="'status'">
            <bixi-table-col-status [configVersion]="configVersion" [row]="row" [col]="col" [index]="index"></bixi-table-col-status>
          </ng-container>
          <ng-container *ngSwitchCase="'progress'">
            <bixi-table-col-progress [configVersion]="configVersion" [row]="row" [col]="col" [index]="index"></bixi-table-col-progress>
          </ng-container>
          <ng-container *ngSwitchCase="'template'">
            <bixi-table-col-template [configVersion]="configVersion" [row]="row" [col]="col" [index]="index"></bixi-table-col-template>
          </ng-container>
          <ng-container *ngSwitchCase="'operations'">
            <bixi-table-col-operations [configVersion]="configVersion" [row]="row" [col]="col" [index]="index"></bixi-table-col-operations>
          </ng-container>
          <ng-container *ngSwitchCase="'checkbox'">
            <bixi-table-col-checkbox
              [configVersion]="configVersion"
              [row]="row"
              [col]="col"
              [index]="index"
              [selectedKeys]="selectedKeys"
              (selectedChange)="onRowSelectedChange($event)"
            >
            </bixi-table-col-checkbox>
          </ng-container>
          <ng-container *ngSwitchDefault>
            <bixi-table-col-text [configVersion]="configVersion" [row]="row" [col]="col" [index]="index"></bixi-table-col-text>
          </ng-container>
        </td>
      </ng-container>
    </tr>
  </tbody>
</nz-table>

<ng-template #footerTpl> {{ tableTotal }} </ng-template>