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

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

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

@Component({
  selector: 'nz-demo-table-fixed-columns',
  template: `
    
      
        
          Full Name
          Age
          Column 1
          Column 2
          Column 3
          Column 4
          Column 5
          Column 6
          Column 7
          Column 8
          Action
        
      
      
        
          {{data.name}}
          {{data.age}}
          {{data.address}}
          {{data.address}}
          {{data.address}}
          {{data.address}}
          {{data.address}}
          {{data.address}}
          {{data.address}}
          {{data.address}}
          
            action
          
        
      
    `,
  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！

在实际应用中，第一步就是要在页面的标签中添加一个属性用于显示滚动条：[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里,还需要设置每一列的宽度:

            序号
            
              操作
            
            单据号
            供应商代码
            供应商名称
            物料代码
            物料名称
            计量单位
            价格
            生效日期
            截止日期
            状态
            价格单位
            税率
            价格类型
            制造商代码
            制造商名称
            库存组织
            供方说明
            处理意见
            发布人
            发布日期
          
        
...........

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

最终的展示效果: