angular4 nz-zorro table嵌套table

	<nz-table #nzTable [nzDataSource]="data" [nzIsPagination]="false" >
						<thead nz-thead>
							<tr>
							<th nz-th [nzExpand]="true"></th>
							<th nz-th><span>Name</span></th>
							<th nz-th><span>Age</span></th>
							<th nz-th><span>Address</span></th>
							<th nz-th><span>Action</span></th>
							</tr>
						</thead>
						<tbody nz-tbody>
							<ng-template ngFor let-data [ngForOf]="nzTable.data">
							<tr nz-tbody-tr>
								<td nz-td [nzExpand]="true">
								<nz-row-expand-icon [(nzExpand)]="data.expand" [hidden]="false"></nz-row-expand-icon>
								</td>
								<td nz-td>{{data.name}}</td>
								<td nz-td>{{data.age}}</td>
								<td nz-td>{{data.address}}</td>
								<td nz-td>
									<span style="color:#2d9aff" (click)="test(data)">
										{{ data.expand ? '合并' : '展开' }}
									</span>
								</td>
							</tr>
							<tr nz-tbody-tr *ngIf="data.expand">
								<td nz-td></td>
								<td nz-td colspan="4">
								<div style="width: 100%;">
									<nz-table [nzIsPagination]="false"  #nzTable2   [nzDataSource]="data.list">
										<thead nz-thead >
											<tr>
												<th nz-th><span>Age</span></th>
												<th nz-th><span>Address</span></th>
												<th nz-th><span>Action</span></th>
												</tr>
										</thead>
										<tbody nz-tbody>
											<tr class="dynamic-table-tr" nz-tbody-tr *ngFor="let item of data.list; index as i" style="cursor: pointer">
												<td nz-td>{{item.name}}</td>
												<td nz-td>{{item.age}}</td>
												<td nz-td>{{item.address}}</td>
												<td nz-td>
													<span style="color: #2d9aff; width: 706px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400">{{ "icsm.common.detail" | translate }}</span>
												</td>
											</tr>
										</tbody>
									</nz-table> 
								</div>
								</td>
							</tr>
							</ng-template>
						</tbody>
					</nz-table>
  data = [
    {
      id: 1,
      name       : 'John Brown',
      age        : 32,
      expand     : true,
      address    : 'New York No. 1 Lake Park',
      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
      list:[{
        name       : 'John Brown',
        age        : 1,
        address    : 'New York No. 1 Lake Park',
        description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
      }]
    },
    {
      id: 2,
      name       : 'Jim Green',
      age        : 42,
      expand     : false,
      address    : 'London No. 1 Lake Park',
      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
      list:[]
    },
    {
      id: 3,
      name       : 'Joe Black',
      age        : 32,
      expand     : false,
      address    : 'Sidney No. 1 Lake Park',
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
      list:[]
    },
  ];


  test(val) {
    if (!val.expand) {
      this.data = this.data.map(item => {
        return {
          ...item,
          expand: item.id === val.id ? true : false
        }
      })
    } else {
      val.expand = !val.expand
    }
  }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Angular 中使用 ng-zorro-antdnz-table 组件合并表格,可以使用 nzSpanMethod 属性来指定合并规则。具体步骤如下: 1. 在组件中定义表格数据源 dataSource 和表格列定义 columns。 2. 在表格列定义中,对需要合并的列设置 nzSpanMethod 属性,该属性值为一个回调函数,用于计算该列每个单元格的合并行数和列数。 3. 在回调函数中,可以通过参数 row 和 column 获取当前单元格所在的行和列,然后根据业务需求计算出该单元格需要合并的行数和列数。 示例代码如下: ``` <ng-container *ngFor="let col of columns"> <th *ngIf="!col.children" [nzWidth]="col.width || ''" [nzLeft]="col.left || ''" [nzRight]="col.right || ''" [nzAlign]="col.align || 'center'" [nzVerticalAlign]="col.verticalAlign || 'middle'" [nzSpanMethod]="col.spanMethod"> {{ col.title }} </th> <th *ngIf="col.children" [nzColSpan]="col.colSpan" [nzRowSpan]="col.rowSpan"> {{ col.title }} </th> </ng-container> ``` 其中,columns 数组中的每个元素表示一个表格列定义,具体属性如下: - title:列标题。 - width:列宽度。 - left:左侧距离。 - right:右侧距离。 - align:水平对齐方式。 - verticalAlign:垂直对齐方式。 - children:子列定义,用于实现表头多级嵌套。 - colSpan:列合并数。 - rowSpan:行合并数。 - spanMethod:合并规则回调函数。 合并规则回调函数的参数如下: - row:当前单元格所在的行。 - column:当前单元格所在的列。 回调函数需要返回一个对象,包含以下属性: - rowspan:合并的行数。 - colspan:合并的列数。 示例代码如下: ``` spanMethod(row: any, column: any): { rowspan: number, colspan: number } { if (column.key === 'name') { if (row.id === 1) { return { rowspan: 2, colspan: 1 }; } else if (row.id === 3) { return { rowspan: 2, colspan: 1 }; } } return { rowspan: 1, colspan: 1 }; } ``` 以上代码实现了对 name 列的合并,当该列的值为 'John' 或 'Lucy' 时,将该单元格合并到下一行;当该列的值为 'Tom' 或 'Jerry' 时,将该单元格合并到上一行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值