Angular：nz-table中显示横向滚动条

首先，可以参考一下ant-design官方文档中对于横向滚动条的用法（这里参考1.8.1版本的固定列方法）：

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-table-fixed-columns',
  template: `
    <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" [nzScroll]="{x:'1300px'}">
      <thead>
        <tr>
          <th nzWidth="100px" nzLeft="0px">Full Name</th>
          <th nzWidth="100px" nzLeft="100px">Age</th>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
          <th>Column 7</th>
          <th>Column 8</th>
          <th nzWidth="100px" nzRight="0px">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of nzTable.data">
          <td nzLeft="0px">{{data.name}}</td>
          <td nzLeft="100px">{{data.age}}</td>
          <td>{{data.address}}</td>
          <td>{{data.address}}</td>
          <td>{{data.address}}</td>
          <td>{{data.address}}</td>
          <td>{{data.address}}</td>
          <td>{{data.address}}</td>
          <td>{{data.address}}</td>
          <td>{{data.address}}</td>
          <td nzRight="0px">
            <a>action</a>
          </td>
        </tr>
      </tbody>
    </nz-table>`,
  styles  : []
})
export class NzDemoTableFixedColumnsComponent {
  dataSet = [
    {
      key    : '1',
      name   : 'John Brown',
      age    : 32,
      address: 'New York Park',
    },
    {
      key    : '2',
      name   : 'Jim Green',
      age    : 40,
      address: 'London Park',
    }
  ];
}

对于列数很多的数据，可以使用nzLeft和nzRight固定前后的列，横向滚动查看其它数据，需要和 nzScroll.x 配合使用。想要在表格中显示一个横向的滚动条，一定要注意指定 nzScroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 nzScroll.x！

在实际应用中，第一步就是要在页面的<nz-table>标签中添加一个属性用于显示滚动条：[nzScroll]="scrollValue"

然后在组件中设置这个属性：scrollValue: any = { y: 0 , x: 0};，并在ngOnInit中给一个初始值

this.scrollValue.y = (window.innerHeight - 420) + 'px';
this.scrollValue.x = (window.innerWidth - 1000) + 'px';

然后写一个方法控制表格的横向纵向滚动条的大小:

  setScrollValue() {
    this.scrollValue.y =
      this.tableWarpEle.nativeElement.clientHeight -
      this.theadEle.nativeElement.clientHeight -
      this.optionEle.nativeElement.clientHeight -
      100 +
      'px';                                                
// 纵向滚动条长度比较特殊,最好要计算页面上其他元素的高度
    this.scrollValue.x = 2500 + 'px';
  }

ngAfterViewInit()方法中也调用这个控制滚动条的方法,对页面的布局进行把控: 

ngAfterViewInit() {
    setTimeout(() => {
      this.searchHeight = this.searchWarpEle.nativeElement.clientHeight;
      this.serarchFormHeight[0] = this.searchHeight;
    }, 10);
    setTimeout(() => {
      this.setScrollValue();
    }, 100);
  }

在我们的table里,还需要设置每一列的宽度:

<tr #theadEle>
            <th nzWidth="60px">序号</th>
            <th nzWidth="150px">
              <span>操作</span>
            </th>
            <th nzWidth="200px" nzShowSort nzSortKey="code">单据号</th>
            <th nzWidth="200px" nzShowSort nzSortKey="vendor_code">供应商代码</th>
            <th nzWidth="200px" nzShowSort nzSortKey="vendor_name">供应商名称</th>
            <th nzWidth="200px" nzShowSort nzSortKey="item_code">物料代码</th>
            <th nzWidth="200px" nzShowSort nzSortKey="item_name">物料名称</th>
            <th nzWidth="200px" nzShowSort nzSortKey="uom_code">计量单位</th>
            <th nzWidth="100px" nzShowSort nzSortKey="price">价格</th>
            <th nzWidth="200px" nzShowSort nzSortKey="begin_date">生效日期</th>
            <th nzWidth="200px" nzShowSort nzSortKey="end_date">截止日期</th>
            <th nzWidth="100px" nzShowSort nzSortKey="status">状态</th>
            <th nzWidth="100px" nzShowSort nzSortKey="price_unit">价格单位</th>
            <th nzWidth="100px" nzShowSort nzSortKey="tax_rate">税率</th>
            <th nzWidth="100px" nzShowSort nzSortKey="pur_type">价格类型</th>
            <th nzWidth="200px" nzShowSort nzSortKey="producer_code">制造商代码</th>
            <th nzWidth="200px" nzShowSort nzSortKey="producer_name">制造商名称</th>
            <th nzWidth="100px" nzShowSort nzSortKey="inv_id">库存组织</th>
            <th nzWidth="100px" nzShowSort nzSortKey="feedback_remark">供方说明</th>
            <th nzWidth="200px" nzShowSort nzSortKey="process_suggest">处理意见</th>
            <th nzWidth="100px" nzShowSort nzSortKey="release_by">发布人</th>
            <th nzWidth="200px" nzShowSort nzSortKey="release_date">发布日期</th>
          </tr>
        </thead>
...........

注意非固定列宽度之和不要超过 nzScroll.x即可

最终的展示效果: