antd Table通过onCell属性实现表格自定义合并

前段时间迭代不是很忙，抽空写了个表格合并的函数。这边对此进行简单记录一下。

主要实现的功能如下：

（ps：该函数需要搭配antd Table使用）

1.表格数据处理：按照某列处理为相同数据展示在一起

2.单行列的表格数据合并，对于某列进行指定行范围的列合并，或对于某行进行指定列范围的行合并

3.整体表格的数据合并，对于指定的两个区域，分别进行行合并和列合并

原理说明如下：

通过 colSpan,rowSpan 进行行列合并。
需要合并的列需添加onCell属性，rowSpan命名格式为：record['rowSpan' + 列key], colSpan命名格式为：record['colSpan' + 列key]
给Table传入columns时，可通过如下columnsTitle给columns添加onCell属性（<Table columns={this.columnsTitle(columns)} />）
columnsTitle = (column = []) => {
  // 给columns根据key动态增加onCell属性
  return column.map(item => {
    item.onCell = record => ({
      rowSpan: record['rowSpan' + item.key],
      colSpan: record['colSpan' + item.key]
    });
    return item;
  });
};

一些传参说明：

| 属性项      | 说明                              | type   | 可选 | required | default | 详细说明                                            |
| :---------- | :-------------------------------- | :----- | :--- | :------- | :------ | :-------------------------------------------------- |
| data        | 表格数据 Table-dataSource         | Array  | -    | true     | -       |
| columns     | 表格列配置 Table-columns          | Array  | -    | true     | -       |
| mergeMethod | 表示操作类型 行/列合并 或处理数据 | String | -    | true     | -       | 'column' / 'row' / 'handleData' / 'handleMultiData' |
| markNum     | 指定合并的行列                    | Number | -    | false    | -       | 单数据合并及处理数据时必填（从0初始）                          |
| mergeScope  | 合并的范围，指定行列范围          | Array  | -    | - false  | -       | 单数据及多数据合并时必填                            |
| rowRefer    | 正在合并的行数                    | Number | -    | - false  | -       | 行合并 （mergeMethod = 'row'）合并时必填            |

对于mergeScope的详细说明：

- 单列('column')： 表示按照从 mergeScope[0]行至 mergeScope[1]行的列合并 例如：[2,5]
- 单行('row')： 表示按照从 mergeScope[0]列至 mergeScope[1]列的行合并 例如： [2,5]
- 多行列合并('handleMultiData')： mergeScope 内元素也是数组形式[[], []]
  例如: mergeScope: [[1,2,1,4], [3,5,1,5]]

- - 四个值分别表示起始列，结束列，起始行，结束行
- - mergeScope[0]表示列合并范围：第一列至第二列进行列合并（从第一行到第四行的列合并）
- - mergeScope[1]表示行合并范围：第一行至第五行进行行合并（从第三列到第五列的行合并）；
- - 当只需要进行多列合并，第二个参数可传[], eg: [[1,2,1,4], []]；
- - 当只需要进行多行合并，第一个参数可传[], eg: [[], [3,5,1,5]]

对于markNum的说明：

markNum：

- 单列及处理数据时传需要处理的列数
- 单行合并时传合并范围的起始列，eg:mergeScope: [2,5] -> markNum: 2

传参参考：

mergeMethod合并类型： 'column' 'row' 'handleData' 'handleMultiData'：
1.'handleData'- 按照某列进行数据处理  - rowSpanData({data, columns, mergeMethod, markNum})
2.'column'- 某列进行指定行范围数据合并  - rowSpanData({data, columns, mergeMethod, markNum, mergeScope})
3.'row'  - 某行进行指定列范围数据合并 - rowSpanData({data, columns, mergeMethod, markNum, mergeScope, rowRefer})
4.'handleMultiData' - 同时进行多行列数据的合并 - rowSpanData({data, columns, mergeMethod, mergeScope})

---------------------------------------------------------------------------手动分割线---------------------------------------------------------------------------------------------------------------------

代码实现如下：

只要引入rowSpanData函数即可进行使用

// 对于表格数据进行计算处理

// 列表合并相同列
// 表头只支持列合并，使用 column 里的 colSpan 进行设置。
// 表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
// 表格的合并操作主要就是通过设置colSpan属性&rowSpan属性
const mergeRows = (data: any[], colName: string, mergeScope: any[]): any[] => {
  const startMergeSite = mergeScope[0];
  const endMergeSite = mergeScope[1];
  let idx = 0;
  let handledata = data.slice(startMergeSite, endMergeSite + 1);
  try {
    const filterData = handledata.find(
      // 判断是否已经进行过该colName的行列合并，不接受某行列进行同时行列合并
      item =>
        item['colSpan' + colName] ||
        item['colSpan' + colName] === 0 ||
        item['rowSpan' + colName] ||
        item['rowSpan' + colName] === 0
    );
    if (filterData) {
      handledata = data.slice(startMergeSite, endMergeSite + 1);
      throw Error('');
    } else {
      data[startMergeSite]['rowSpan' + colName] = 1;
      handledata = data.slice(startMergeSite + 1, endMergeSite + 1);
      handledata = handledata.reduce(
        (mergedRows, item, index) => {
          if (item[colName] === mergedRows[idx][colName]) {
            mergedRows[idx]['rowSpan' + colName]++;
            item['colSpan' + colName] = 0;
          } else {
            item['rowSpan' + colName] = 1;
            idx = index + 1;
          }
          return [...mergedRows, item];
        },
        [data[startMergeSite]]
      );
    }
  } catch (e) {
    console.log('该行列已被合并过，不支持列合并');
  }
  // 进行原始数组的拼接
  data.splice(startMergeSite, endMergeSite - startMergeSite + 1, ...handledata);
  return data;
};

// 行合并
const mergeCells = (
  data: any[],
  colName: string,
  rowRefer: number,
  mergeScope: number[],
  columnList: string[]
): any[] => {
  const startMergeSite = mergeScope[0];
  const endMergeSite = mergeScope[1];
  if (Array.isArray(data) && data.length === 0) return [];
  const dataArr = [...data[rowRefer]]; // 需要处理的该行数据
  let handleData = dataArr;
  try {
    const handledata = dataArr.find(
      // 异常行列合并捕获
      item =>
        item['colSpan' + colName] ||
        item['colSpan' + colName] === 0 ||
        item['rowSpan' + colName] ||
        item['rowSpan' + colName] === 0
    );
    if (handledata) {
      throw Error('');
    } else {
      handleData = dataArr.reduce((result, item) => {
        let idx = 1;
        const handleColumnList = columnList.slice(startMergeSite + 1, endMergeSite + 1);
        Object.entries(item).forEach(item1 => {
          if (item1[0] !== colName && item1[1] === item[colName] && handleColumnList.includes(item1[0])) {
            item['rowSpan' + item1[0]] = 0;
            idx++;
            item['colSpan' + colName] = idx; // 需要占据的表格个数
          }
        });
        return [...result, ...item];
      }, []);
    }
  } catch (e) {
    console.log('该行列已被合并过，不支持行合并');
  }
  data.splice(rowRefer, 1, ...handleData);

  return data;
};

// 数据处理
const classifyRows = (data: any[], classifyRule: string): any[] => {
  // 对于表格数据根据key进行排序处理
  const keys = [classifyRule];
  const classified = data.slice(1).reduce(
    (ordered, row) => {
      // 从已经排好序的行中寻找一行 row1，如果这行 row1 的 keys 值分别等于当前遍历到的行的 keys 值，就把当前遍历到的这一行插入到 row1 之后
      // 否则把当前遍历到的行放在所有排好序的行的最后一行
      const index = ordered.findIndex(orderedRow =>
        keys.reduce((boolean, curKey) => boolean && orderedRow[curKey] === row[curKey], true)
      );
      if (index !== -1) {
        return [...ordered.slice(0, index + 1), row, ...ordered.slice(index + 1)];
      } else {
        return [...ordered, row];
      }
    },
    [data[0]]
  );
  return classified;
};

interface TableParams {
  data?: any[];
  mergeMethod?: string;
  markNum?: string | number;
  mergeScope?: any[];
  columns?: any[];
  rowRefer?: number;
}

const rowSpanData = ({
  data = [],
  columns,
  mergeMethod = 'column',
  markNum,
  mergeScope,
  rowRefer
}: TableParams = {}): any[] => {
  //  列表合并相同行 rowSpanData: (data, colName)
  //  列表合并相同行 rowSpanData: (data, colName) ————————》升级一下：row 一行某几列合并、col 一列 某几行合并、columns 表头多级处理 （只是对数据处理）
  let result;
  // 获取表格columns数组的key集合
  const columnList = Array.isArray(columns) && columns.map(item => item.key);
  const colName = columnList && columnList[markNum];
  if (mergeMethod === 'column') {
    result = mergeRows(data, colName, mergeScope);
  } else if (mergeMethod === 'row') {
    result = mergeCells(data, colName, rowRefer, mergeScope, columnList);
  } else if (mergeMethod === 'handleData') {
    result = classifyRows(data, colName);
  } else if (mergeMethod === 'handleMultiData') {
    // 表格整体处理

    const colMergeScope = mergeScope[0];
    const rowMergeScope = mergeScope[1];
    let handleMergeData = data;
    // 先进行列合并
    // 为【】时不进行列处理
    if (Array.isArray(colMergeScope) && colMergeScope.length) {
      const startColMergeCol = colMergeScope[0];
      const endColMergeCol = colMergeScope[1];
      const startRowMergeCol = colMergeScope[2];
      const endRowMergeCol = colMergeScope[3];
      for (let i = startColMergeCol; i <= endColMergeCol; i++) {
        handleMergeData = mergeRows(handleMergeData, columnList[i], [startRowMergeCol, endRowMergeCol]);
      }
    }

    // 再进行行合并
    // 为【】时不进行行处理
    if (Array.isArray(rowMergeScope) && rowMergeScope.length) {
      const startColMergeRow = rowMergeScope[0];
      const endColMergeRow = rowMergeScope[1];
      const startRowMergeRow = rowMergeScope[2];
      const endRowMergeRow = rowMergeScope[3];
      for (let i = startRowMergeRow; i <= endRowMergeRow; i++) {
        handleMergeData = mergeCells(
          handleMergeData,
          columnList[startColMergeRow],
          i,
          [startColMergeRow, endColMergeRow],
          columnList
        );
      }
    }
    result = handleMergeData;
  }
  return result;
};
export default rowSpanData;