如何在Ng-Zorro(ng-antd)的Nz-Table动态列中按列名调整指定列宽度

方案1：列配置预设宽度（推荐） #

• 第一步：调整列配置数组listOfColumns，给需要缩小宽度的列新增宽度属性，其他列保留默认自适应即可

listOfColumns = [
  { name: '操作', width: '80px' }, // 需缩小的列1
  { name: '状态', width: '100px' }, // 需缩小的列2
  { name: '商品名称' },
  { name: '商品描述' }
]

• 第二步：同步给表头th和表格内容td绑定宽度，推荐使用Ng-Zorro自带的nzWidth属性，兼容组件内部布局逻辑

<thead>
  <tr>
    <th *ngFor="let column of listOfColumns" [nzWidth]="column.width">
      {{ column.name }}
    </th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let item of tableData">
    <td *ngFor="let column of listOfColumns" [nzWidth]="column.width">
      <!-- 单元格内容渲染逻辑 -->
    </td>
  </tr>
</tbody>

方案2：按列名动态匹配宽度（无需修改原有列配置） #

如果不想改动原有listOfColumns的结构，可以直接在模板内根据列名判断赋值宽度：

<thead>
  <tr>
    <th *ngFor="let column of listOfColumns"
        [nzWidth]="column.name === '操作' ? '80px' : (column.name === '状态' ? '100px' : null)">
      {{ column.name }}
    </th>
  </tr>
</thead>
<!-- tbody的td需要同步添加相同的nzWidth绑定逻辑 -->

补充说明：如果需要列内容超出宽度后自动显示省略号，可以给th和td同时添加nzEllipsis属性，避免内容撑开列宽。

内容的提问来源于stack exchange，提问作者Optimist Rohit