a-table表格根据属性值相同进行上下行的合并

参照下面这个方法,可以实现很多种情况下的行合并
效果:因为无法上传效果图,直接上代码,请见谅

1:如果你是先请求数据,那就拿到请求结果的时候做如下逻辑,我用的假数据,在created或者mounted做如下逻辑都可以
```javascript
this.tableData = [{ wuliao: '黄豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '*****', supplyCode: '*****', supplyName: '丽丽'},
      { wuliao: '黄豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '麻子'},
      { wuliao: '黄豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '张三'},
      { wuliao: '绿豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '李四'},
      { wuliao: '绿豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '王五'},
      { wuliao: '绿豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '哈哈'},
      { wuliao: '红枣', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '嘻嘻'}
    ]
    var totalArr = []
    var arr = []
    this.tableData.forEach((item, index) => {
      arr.push(item)
      if ((this.tableData[index + 1] && item.wuliao !== this.tableData[index + 1].wuliao) || !this.tableData[index + 1]) {
        arr.forEach((it, ind) => {
          if (ind === 0) {
            it.rowSpan = arr.length
          } else {
            it.rowSpan = 0
          }
        })
        totalArr.push(...arr)
        arr = []
      }
    })
    this.tableData = totalArr

如上是处理表格的data的逻辑

2,在methods中定义表格合并的方法

```javascript
changeRowSpan(value, row, index) {
  return {
    children: value,
    attrs: {
      rowSpan: row.rowSpan
    }
  }
}

3.在自定的table的columns数据中,找到dataIndex为物料的那一项,把methods中定义的方法赋值给那一项的customRender

columns: [
        {
          title: '物料类别',
          dataIndex: 'wuliao',
          width: '88px',
          align: 'center',
          customRender: this.changeColSpan
        },
        {
          title: '物料编码',
          dataIndex: 'wuliaoCode',
          width: '78px',
          align: 'center'
        },
        {
          title: '物料名称',
          dataIndex: 'wuliaoName',
          width: '78px',
          align: 'center'
        }
      ],

完美实现合并效果
我只是拿一个属性举例,其它的都可仿照如上的方式

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Angular 中使用 ng-zorro-antd 的 nz-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、付费专栏及课程。

余额充值