博客

	<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
    }
  }