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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值