ant +vue 复杂表格合并

实现表格的行列合并

如上图，实现列相同的合并

1. table字段渲染时customerRender调用方法。多个字段就各自一个方法，这里实例第一列的合并方法

 {
            title: '',
            colSpan: 2,
            align: 'center',
            width: 100,
            fixed: 'left',
            dataIndex: 'ObActType',
            customRender: this.changeObActTypeSpan,
          },

2. 方法中定制合并行或列，每个字段有不同的合并方式，可根据实际调整

// 合并单元格，相同OB ObActType
      changeObActTypeSpan(value, row, index) {
        // 上一行该列数据是否一样
        let rowSpan = 1
        // 部门值相同的单元格合并
        if (index !== 0 && value === this.dataSourceTrans[index - 1].ObActType) {
          return {
            children: value,
            attrs: {
              rowSpan: 0,
            },
          }
        }
        // 判断下一行是否相等
        for (let i = index + 1; i < this.dataSourceTrans.length; i++) {
          if (value !== this.dataSourceTrans[i].ObActType) {
            break
          } else {
            rowSpan++
          }
        }
        // 如果这一列与下一列costCenter数值相同
        if (value === row.costCenter) {
          return {
            children: value,
            attrs: {
              rowSpan: rowSpan,
              colSpan: 2,
            },
          }
        }
        return {
          children: value,
          attrs: {
            rowSpan: rowSpan,
          },
        }
      },