相同数据合并行,适用:vxe-table,elementUI table

效果:
在这里插入图片描述
vxe-table:
通过自定义 span-method 合并方法 Function({row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, data})

elementUI table:
通过自定义span-method 合并方法 Function({ row, column, rowIndex, columnIndex })

以下代码为vxe-table:

 <vxe-grid
  	highlight-current-row
    border
    rowId="id"
    resizable
    :height="vxe_height"
    size="mini"
    :loading="loading"
    :columns="columns"
    :data="tableData"
    ref="xGrid"
    :span-method="colspanMethod"
  >

表格数据:

//表格数据:
    private tableData: any = [
        { id: 1, name: '百度', link: 'https://www.baidu.com/', saleOrder: 1 },
        { id: 2, name: '脸书', link: 'https://www.facebook.com/', saleOrder: 1 },
        { id: 3, name: '京东', link: 'https://www.jd.com/', saleOrder: 2 },
        { id: 4, name: '淘宝', link: 'https://www.taobao.com/', saleOrder: 3 },
        { id: 5, name: '谷歌', link: 'https://www.google.com/', saleOrder: 3 },
        { id: 6, name: '谷歌', link: 'https://www.google.com/', saleOrder: 3 },
    ];

private formatColspan(arr): void {
    let colspanResult : any= []; // 合并的结果:[2, 0, 1, 3, 0, 0],有相同的第一个累加,后面的都为0
    let colspanIndex: number = 0;
    arr.forEach((item, index) => {
      //如果是第一项:默认给1
      if (index === 0) {
        colspanResult.push(1);
      } else {
        //如果不是第一项:
        //该项与前一项相比字段:
        if (item.saleOrder === arr[index - 1].saleOrder) {
          //第2列需合并相同内容的判断条件
          colspanResult[colspanIndex] += 1;
          colspanResult.push(0);
        } else {
          colspanResult.push(1);
          colspanIndex = index;
        }
      }
    });
    return colspanResult;
  }
private colspanMethod({
    row,
    rowIndex,
    $rowIndex,
    column,
    columnIndex,
    $columnIndex,
    data
  }): void {
    if (columnIndex === 1) {
      let arr: any = this.formatColspan(data);
      const _row = arr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      let a: any = {
        rowspan: _row,
        colspan: _col
      };
      return a;
    }
  }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值