Angular ant design ng-Zorro table col 修复问题

Question

我正在为 Ant design table (ng-zorro table) 使用我的 Angular 项目，任何人都知道如何修复页脚栏部分在 table,?如下图

代码在这里

interface ProjectBooked {
  key: string;
  cName: string;
  cTitle: any;
  pLocation: string;
  conName: any;

  sortOrder?: NzTableSortOrder;
  sortFn?: NzTableSortFn;
  listOfFilter?: NzTableFilterList;
  filterFn?: NzTableFilterFn;
  filterMultiple?: boolean;
  sortDirections?: NzTableSortOrder[];
}

@Component({
  selector: 'nz-demo-table-multiple-sorter',
  template: `
    <nz-table
              #basicTable
              #sortTable
              [nzData]="listOfDisplayData"
              #borderedTable
              nzBordered
              #headerTable
              [nzLoading]="loading"
              [nzPageSize]="5" [nzScroll]="{ x: '1000px', y: '240px' }">
              <thead>
              <tr>
                <th nzCustomFilter nzColumnKey="cName" [nzSortFn]="sortFn"
                >
                  Company Name
                  <nz-filter-trigger [(nzVisible)]="visible" [nzActive]="searchValue.length > 0"
                                     [nzDropdownMenu]="menu">
                    <i nz-icon nzType="search"></i>
                  </nz-filter-trigger>
                </th>
                <th>Position Title</th>
                <th>Position Location</th>
                <th>Consultant Name</th>
                <th nzWidth="100px">Status</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of basicTable.data">
                <td>{{ data.cName }}</td>
                <td>{{ data.cTitle }}</td>
                <td>{{ data.pLocation }}</td>
                <td>{{ data.conName }}</td>
                <td>
                  <a><nz-tag [nzColor]="'blue'">Booked</nz-tag></a>
                </td>
              </tr>
              </tbody>
            </nz-table>
            <nz-dropdown-menu #menu="nzDropdownMenu">
              <div class="ant-table-filter-dropdown">
                <div class="search-box">
                  <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
                  <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
                    Search
                  </button>
                  <button nz-button nzSize="small" (click)="reset()">Reset</button>
                </div>
              </div>
            </nz-dropdown-menu>
  `
})
export class NzDemoTableMultipleSorterComponent {
   constructor(private i18n: NzI18nService) {}



  loading = false;
  searchValue = '';
  visible = false;
  // Project Booked




  listOfData: ProjectBooked[] = [
    {
      key: '1',
      cName: 'OBUSIT ',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
  
},
    {
      key: '2',
      cName: 'OBUSIT TEST ',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
           conName: 'Admin',
    },
    {
      key: '3',
      cName: 'OBUSIT University',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
    },
    {
      key: '4',
      cName: 'OBUSIT Howard University',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
      
    },

  ];
  listOfDisplayData = [...this.listOfData];








  // Month Picker
  date = null;
  dateRange = [];
  isEnglish = false;




  reset(): void {
    this.searchValue = '';
    this.search();
  }

  search(): void {
    this.visible = false;
    this.listOfDisplayData = this.listOfData.filter((item: ProjectBooked) => item.cName.indexOf(this.searchValue) !== -1);
  }





  onChange(result: Date): void {
    console.log('onChange: ', result);
  }

  getWeek(result: Date): void {
    console.log('week: ', getISOWeek(result));
  }

  changeLanguage(): void {
    this.i18n.setLocale(this.isEnglish ? zh_CN : en_US);
    this.isEnglish = !this.isEnglish;
  }


  ngOnInit(): void {


  }

  sortFn = (a: ProjectBooked, b: ProjectBooked) => a.cName.localeCompare(b.cName);

}

Answer 1

TL;DR -- 没有简单的解决方案。

'last' 行不会总是最后一行，因为您启用了分页。因此，如果您打算让最后一行充当某种摘要，则需要将其从 *ngFor 循环中提取出来，并将其放在行范围之外。一种方法是利用 [nzFooter] 但它需要 TemplateRef （或字符串），因此您需要使用 that particular row:[=17 创建并填充模板=]

问题在于页脚不符合 [nzScroll]，这意味着：

因此需要一些技巧。

另一个甚至是选择

创建另一个没有 header（或隐藏 header）的 table
只填充最后一行
将这个 table 直接放在原来的 header 上面（显然有一些 space 保留给它）
将主 table 的操作委托给新创建的 table，以便排序、过滤等工作。

Angular ant design ng-Zorro table col 修复问题

Angular ant design ng-Zorro table col fixed issue

antd

angular

ng-zorro-antd