[JavaScript知识库]ant design vue 动态表格合并

antd 表格动态行合并

1. 首先是想要达成的效果图片展示
   
2. 因为每次要合并的行数是动态的，因此不能直接将以下内容写在data()里面，需要写在计算属性中。

// computed 计算属性
  get detailCol() {
    return [
      {
        title: 'HIS业务',
        children: [
          {
            title: '结算单编号',
            dataIndex: 'settleCode',
            key: 'settleCode',
            align: 'center',
            width: 100,
            customRender: (text: any, record: any, index: any) => {
              const obj = {
                children: text !== null ? text : '',
                attrs: {
                  rowSpan: 1
                }
              };
              obj.attrs.rowSpan = this.mergeCells(text, this.detailTableList, 'settleCode', index);
              return obj;
            }
          },
          {
            title: '交易时间',
            dataIndex: 'settleTime',
            key: 'settleTime',
            align: 'center',
            width: 120,
            customRender: (text: any, record: any, index: any) => {
              const obj = {
                children: text !== null ? text : '',
                attrs: {
                  rowSpan: record.rowNum
                }
              };
              return obj;
            }
          },
          {
            title: '姓名',
            dataIndex: 'patName',
            key: 'patName',
            align: 'center',
            width: 90,
            customRender: (text: any, record: any, index: any) => {
              const obj = {
                children: text !== null ? text : '',
                attrs: {
                  rowSpan: record.rowNum
                }
              };
              return obj;
            }
          },
          {
            title: '结算单金额',
            dataIndex: 'settleAmount',
            key: 'settleAmount',
            align: 'center',
            width: 90,
            customRender: (text: any, record: any, index: any) => {
              const obj = {
                children: text !== null ? text : '',
                attrs: {
                  rowSpan: record.rowNum
                }
              };
              return obj;
            }
          },
          {
            title: '支付方式',
            dataIndex: 'payTypeName',
            key: 'payTypeName',
            align: 'center',
            width: 90
          },
          {
            title: '明细金额',
            dataIndex: 'hisTradeAmount',
            key: 'hisTradeAmount',
            align: 'center',
            width: 90
          },
          {
            title: '收款员',
            dataIndex: 'cashierName',
            key: 'cashierName',
            align: 'center',
            width: 90
          }
        ]
      },
    ];
  }

3. 合并处理方法

  /**
   * 单元格合并处理
   * @param text 当前单元格的值
   * @param data 当前表格分页所有数据
   * @param key 当前列的dataIndex
   * @param index 当前数据所在下标
   * @returns {number} 待合并单元格数量
   */
  mergeCells = (text: any, data: any, key: any, index: any) => {
    if (data.length < 1) {
      return 1;
    }
    if (text === '' || text === null) {
      data[index].rowNum = 1;
      return 1;
    }
    // 上一行该列数据是否一样
    if (index !== 0 && text === data[index - 1][key]) {
      data[index].rowNum = 0;
      return 0;
    }
    let rowSpan = 1;
    // 判断下一行是否相等
    for (let i = index + 1; i < data.length; i++) {
      if (text !== data[i][key]) {
        break;
      }
      rowSpan++;
    }
    data[index].rowNum = rowSpan;
    return rowSpan;
  };

大体思路: 根据表格第一列字段 ‘settleCode’ 进行合并，将需要合并的行数保存在该行数据中，后面的时间、姓名等字段再根据此行数进行合并，不需再继续调用合并方法。