nz-table中设置nzWidth遇到的问题

于由城南蝈蝈发布

0.背景

本文组件：Ant Design of Angular 7.5.x

有一个比较长的报表需要展示，大概是下面这个样子，表头包含多行。

一开始看，觉得并不难，10分钟把表头构建出来了。如下：

然后问题来了。

问题1：没有数据的情况下，表头不能滑动。然后加上数据试下效果：

结果更差，因为数据长度原因导致单元格超出长度了，结果就是数据和表头不对应的情况。而且还没有滑动。

上面这段错误的代码如下：

<nz-card class="mt-md">
  <nz-table [nzData]="listOfData" #taskTable nzBordered='true' [nzFrontPagination]="false" [nzScroll]="scrollConfig">
    <thead>
      <!-- 第一行 -->
      <tr>
        <th rowspan="3">行业</th>
        <th rowspan="3">单位名称</th>
        <th rowspan="3">统一代码</th>
        <th colspan="7">统计值1</th>
        <th colspan="8">统计值2</th>
        <th colspan="3">统计值3</th>
        <th colspan="3">统计值4</th>
        <th colspan="4">统计值5</th>
        <th colspan="4">统计值6</th>
        <th rowspan="3">数据1</th>
        <th rowspan="3">数据2</th>
        <th rowspan="3">数据3</th>
        <th rowspan="3">数据4</th>
        <th rowspan="3">数据5</th>
        <th rowspan="3">数据6</th>
        <th rowspan="3">数据7</th>

        <!-- <th  nzRight="0px">操作</th> -->
      </tr>
      <!-- 第二行 -->
      <tr>
        <th rowspan="2">2015年</th>
        <th rowspan="2">2015年</th>
        <th rowspan="2">2018年</th>
        <th colspan="2">2019年</th>
        <th colspan="2">2020年</th>
        <th rowspan="2">指标名称</th>
        <th rowspan="2">2015年(政府值)</th>
        <th rowspan="2">2015年</th>
        <th rowspan="2">2018年</th>
        <th colspan="2">2019年</th>
        <th colspan="2">2020年</th>
        <th rowspan="2">指标名称</th>
        <th rowspan="2">审计值</th>
        <th rowspan="2">限额</th>
        <th rowspan="2">淘汰设备</th>
        <th rowspan="2">低能效设备</th>
        <th rowspan="2">空压机</th>
        <th rowspan="2">数量</th>
        <th rowspan="2">总数量（个）</th>
        <th rowspan="2">投资额（万元）</th>
        <th rowspan="2">节能量（tce）</th>
        <th colspan="2">2019年</th>
        <th colspan="2">2020年</th>
      </tr>
      <!-- 第三行 -->
      <tr>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>能耗总量（tce）</th>
        <th>节能目标</th>
        <th>能耗总量（tce）</th>
        <th>节能目标</th>
      </tr>
    </thead>
    <tbody>
  
    </tbody>
  </nz-table>
</nz-card>
1.解决办法

尝试了好多办法，最终试了加nzWidth，然后给每个th加上 100px之后的效果：

数据可以滚动了，但是还是对不齐，而且后面空出了一大块，肯定是nzWidth的问题。

然后这一段错误的代码如下：

<nz-card class="mt-md">
  <nz-table [nzData]="listOfData" #taskTable nzBordered='true' [nzFrontPagination]="false" [nzScroll]="scrollConfig">
    <thead>
      <!-- 第一行 -->
      <tr>
        <th nzWidth="100px" rowspan="3">行业</th>
        <th nzWidth="100px"  rowspan="3">单位名称</th>
        <th nzWidth="100px"  rowspan="3">统一代码</th>
        <th  nzWidth="100px" colspan="7">统计值1</th>
        <th nzWidth="100px" colspan="8">统计值2</th>
        <th nzWidth="100px" colspan="3">统计值3</th>
        <th nzWidth="100px" colspan="3">统计值4</th>
        <th nzWidth="100px"  colspan="4">统计值5</th>
        <th nzWidth="100px"  colspan="4">统计值6</th>
        <th nzWidth="100px" rowspan="3">数据1</th>
        <th nzWidth="100px" rowspan="3">数据2</th>
        <th nzWidth="100px" rowspan="3">数据3</th>
        <th nzWidth="100px" rowspan="3">数据4</th>
        <th nzWidth="100px"  rowspan="3">数据5</th>
        <th nzWidth="100px" rowspan="3">数据6</th>
        <th nzWidth="100px" rowspan="3">数据7</th>

        <!-- <th  nzRight="0px">操作</th> -->
      </tr>
      <!-- 第二行 -->
      <tr>
        <th nzWidth="100px"  rowspan="2">2015年</th>
        <th nzWidth="100px" rowspan="2">2015年</th>
        <th nzWidth="100px" rowspan="2">2018年</th>
        <th nzWidth="100px" colspan="2">2019年</th>
        <th nzWidth="100px" colspan="2">2020年</th>
        <th nzWidth="100px" rowspan="2">指标名称</th>
        <th nzWidth="100px" rowspan="2">2015年(政府值)</th>
        <th nzWidth="100px" rowspan="2">2015年</th>
        <th nzWidth="100px" rowspan="2">2018年</th>
        <th nzWidth="100px" colspan="2">2019年</th>
        <th nzWidth="100px" colspan="2">2020年</th>
        <th nzWidth="100px" rowspan="2">指标名称</th>
        <th nzWidth="100px" rowspan="2">审计值</th>
        <th nzWidth="100px" rowspan="2">限额</th>
        <th nzWidth="100px" rowspan="2">淘汰设备</th>
        <th nzWidth="100px" rowspan="2">低能效设备</th>
        <th nzWidth="100px" rowspan="2">空压机</th>
        <th nzWidth="100px" rowspan="2">数量</th>
        <th nzWidth="100px" rowspan="2">总数量（个）</th>
        <th nzWidth="100px" rowspan="2">投资额（万元）</th>
        <th nzWidth="100px" rowspan="2">节能量（tce）</th>
        <th nzWidth="100px" colspan="2">2019年</th>
        <th nzWidth="100px" colspan="2">2020年</th>
      </tr>
      <!-- 第三行 -->
      <tr>
        <th nzWidth="100px" >数量</th>
        <th nzWidth="100px">是否完成</th>
        <th nzWidth="100px">数量</th>
        <th nzWidth="100px">是否完成</th>
        <th nzWidth="100px">数量</th>
        <th nzWidth="100px">是否完成</th>
        <th nzWidth="100px">数量</th>
        <th nzWidth="100px">是否完成</th>
        <th nzWidth="100px">能耗总量（tce）</th>
        <th nzWidth="100px">节能目标</th>
        <th nzWidth="100px">能耗总量（tce）</th>
        <th nzWidth="100px">节能目标</th>
      </tr>
    </thead>
    
  </nz-table>
</nz-card>
2.问题的解决与验证

我本来以为以表头的最小维度设置宽度（比如 “数量”、”自动完成”这种字段）可以自动撑开上一级的表格，结果还是不行。然后开始尝试了漫长的尝试之路。先试了下前几个自动：

      <tr>
        <th nzWidth="100px" rowspan="3">行业</th>
        <th nzWidth="100px"  rowspan="3">单位名称</th>
        <th nzWidth="100px"  rowspan="3">统一代码</th>
        <th  nzWidth="100px" colspan="7">统计值1</th>
        <th colspan="8">统计值2</th>
        <th colspan="3">统计值3</th>
        <th colspan="3">统计值4</th>
        <th colspan="4">统计值5</th>
        <th colspan="4">统计值6</th>
        <th rowspan="3">数据1</th>
        <th rowspan="3">数据2</th>
        <th rowspan="3">数据3</th>
        <th rowspan="3">数据4</th>
        <th rowspan="3">数据5</th>
        <th rowspan="3">数据6</th>
        <th rowspan="3">数据7</th>
      </tr>

然后给 ”统计值2“ 设置nzWidth:

 <tr>
        <th nzWidth="100px" rowspan="3">行业</th>
        <th nzWidth="100px"  rowspan="3">单位名称</th>
        <th nzWidth="100px"  rowspan="3">统一代码</th>
        <th nzWidth="100px" colspan="7">统计值1</th>
        <th nzWidth="100px" colspan="8">统计值2</th>
        <th colspan="3">统计值3</th>
        <th colspan="3">统计值4</th>
        <th colspan="4">统计值5</th>
        <th colspan="4">统计值6</th>
        <th rowspan="3">数据1</th>
        <th rowspan="3">数据2</th>
        <th rowspan="3">数据3</th>
        <th rowspan="3">数据4</th>
        <th rowspan="3">数据5</th>
        <th rowspan="3">数据6</th>
        <th rowspan="3">数据7</th>
      </tr>

然后发现不理解的事，下面的”2015年“这个字段的宽度变了？我明明是加的 ”统计值2“这个字段啊。

好吧，继续尝试，我把标题第二行第一个 （”2015“这个字段） 加入了宽度100px。

<thead>
      <!-- 第一行 -->
      <tr>
        <th nzWidth="100px" rowspan="3">行业</th>
        <th nzWidth="100px"  rowspan="3">单位名称</th>
        <th nzWidth="100px"  rowspan="3">统一代码</th>
        <th nzWidth="100px" colspan="7">统计值1</th>
        <th nzWidth="100px" colspan="8">统计值2</th>
        <th colspan="3">统计值3</th>
        <th colspan="3">统计值4</th>
        <th colspan="4">统计值5</th>
        <th colspan="4">统计值6</th>
        <th rowspan="3">数据1</th>
        <th rowspan="3">数据2</th>
        <th rowspan="3">数据3</th>
        <th rowspan="3">数据4</th>
        <th rowspan="3">数据5</th>
        <th rowspan="3">数据6</th>
        <th rowspan="3">数据7</th>
      </tr>
      <!-- 第二行 -->
      <tr>
        <th  nzWidth="100px" rowspan="2">2015年</th>
        <th rowspan="2">2015年</th>
        <th rowspan="2">2018年</th>
        <th colspan="2">2019年</th>
        <th colspan="2">2020年</th>
        <th rowspan="2">指标名称</th>
        <th rowspan="2">2015年(政府值)</th>
        <th rowspan="2">2015年</th>
        <th rowspan="2">2018年</th>
        <th colspan="2">2019年</th>
        <th colspan="2">2020年</th>
        <th rowspan="2">指标名称</th>
        <th rowspan="2">审计值</th>
        <th rowspan="2">限额</th>
        <th rowspan="2">淘汰设备</th>
        <th rowspan="2">低能效设备</th>
        <th rowspan="2">空压机</th>
        <th rowspan="2">数量</th>
        <th rowspan="2">总数量（个）</th>
        <th rowspan="2">投资额（万元）</th>
        <th rowspan="2">节能量（tce）</th>
        <th colspan="2">2019年</th>
        <th colspan="2">2020年</th>
      </tr>
      <!-- 第三行 -->
      <tr>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>能耗总量（tce）</th>
        <th>节能目标</th>
        <th>能耗总量（tce）</th>
        <th>节能目标</th>
      </tr>
    </thead>

更加神奇的事情来了，如下：

标题中的”数量“以及数据中的”否“ 竟然有了宽度。

虽然不知道为什么，但是到现在大概可以猜出来，宽度的设置不是按照最小字段进行展示的，似乎是按照th的个数顺次展示（因为图片上两个有宽度的 开始和结尾中间隔了11个最小单位，而代码里面的th也是隔了11个th。）

那么是不是意味着我只要从头开始写nzWidth=”100px”， 顺序写满数据的字段数就行，而不用纠结到底要写在什么位置。

验证：

   <thead>
      <!-- 第一行 -->
      <tr>
        <th nzWidth="100px" rowspan="3">行业</th>
        <th nzWidth="100px" rowspan="3">单位名称</th>
        <th nzWidth="200px" rowspan="3">统一代码</th>
        <th nzWidth="100px" colspan="7">统计值1</th>
        <th nzWidth="100px" colspan="8">统计值2</th>
        <th nzWidth="100px" colspan="3">统计值3</th>
        <th nzWidth="100px" colspan="3">统计值4</th>
        <th nzWidth="100px" colspan="4">统计值5</th>
        <th nzWidth="100px" colspan="4">统计值6</th>
        <th nzWidth="100px" rowspan="3">数据1</th>
        <th nzWidth="100px" rowspan="3">数据2</th>
        <th nzWidth="100px" rowspan="3">数据3</th>
        <th nzWidth="100px" rowspan="3">数据4</th>
        <th nzWidth="100px" rowspan="3">数据5</th>
        <th nzWidth="100px" rowspan="3">数据6</th>
        <th nzWidth="100px" rowspan="3">数据7</th>
        <th nzWidth="100px" rowspan="3">数据8</th>
      </tr>
      <!-- 第二行 -->
      <tr>
        <th nzWidth="100px" rowspan="2">2015年</th>
        <th nzWidth="100px" rowspan="2">2015年</th>
        <th nzWidth="100px" rowspan="2">2018年</th>
        <th nzWidth="100px" colspan="2">2019年</th>
        <th nzWidth="100px" colspan="2">2020年</th>
        <th nzWidth="100px" rowspan="2">指标名称</th>
        <th nzWidth="100px" rowspan="2">2015年(政府值)</th>
        <th nzWidth="100px" rowspan="2">2015年</th>
        <th nzWidth="100px" rowspan="2">2018年</th>
        <th nzWidth="100px" colspan="2">2019年</th>
        <th nzWidth="100px" colspan="2">2020年</th>
        <th nzWidth="100px" rowspan="2">指标名称</th>
        <th nzWidth="100px" rowspan="2">审计值</th>
        <th nzWidth="100px" rowspan="2">限额</th>
        <th nzWidth="100px" rowspan="2">淘汰设备</th>
        <th nzWidth="100px" rowspan="2">低能效设备</th>
        <th nzWidth="100px" rowspan="2">空压机</th>
        <th nzWidth="100px" rowspan="2">数量</th>
        <th nzWidth="100px" rowspan="2">总数量（个）</th>
        <th nzWidth="100px" rowspan="2">投资额（万元）</th>
        <th nzWidth="100px" rowspan="2">节能量（tce）</th>
        <th nzWidth="100px" colspan="2">2019年</th>
        <th nzWidth="100px" colspan="2">2020年</th>
      </tr>
      <!-- 第三行 -->
      <tr>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>数量</th>
        <th>是否完成</th>
        <th>能耗总量（tce）</th>
        <th>节能目标</th>
        <th>能耗总量（tce）</th>
        <th>节能目标</th>
      </tr>
    </thead>

效果：

暂时完成了，但是不理解。。。。。

5.后记

其实，按照上面那面写还是会有一些问题，最明显的问题，当数据过大时，还是会把单元格给撑开，可以考虑加入百分比。

另外，当没有数据的情况下可以滑动看表头的功能暂时没有实现。

Post Views: 1,495

Related posts:

  1. angular从0到1：环境安装及运行
  2. angular从0到1：angular目录结构详解
  3. angular中class、ngClass、ng-class、[ngClass]有什么区别
  4. angular从0到1：事件(以click事件为例)
  5. angular中如何使用echarts图表
  6. angular中的路由详解(1)—默认路由的用法
分类： 前端
标签：

相关文章

前端

Vue3.0 简单商城—个人信息展示

这篇文章简单解释一些个人信息的展示，主要使用了el-menu这个组件。 阅读更多…

前端

Vue3.0 简单商城—咨询信息展示

前面的文章已经完成了购物车模块，这篇文章完成咨询信息模板，咨询信息用C 阅读更多…

前端

Vue3.0 简单商城—购物车组件

上一篇文章完成了基础的商品列表：Vue3.0 简单商城—商品列表组件 阅读更多…