react+antd表格之行/列合並

因項目遇到表格合並的問題特此將自己的解決方案及代碼附上，希望能幫助到遇到此類問題的人，如有更好的解決方案歡迎來交流，謝謝！

1.在utils.js放入處理數據合並的方法，如下：

/**
 * @param {
 * } datasource  表格數據   Array
 * @param {*} key    當前合並字段key
 * @param {*} index  當前數據行的索引值
 * @param {*} value   值
 * @param {*} firstKey   表格每行的第一個展示的字段
 * @returns
 */

export const getRowSpanCount = (datasource, key, index, value, firstKey) => {
  if (!Array.isArray(datasource)) return 1;
  let datas = datasource.map((_) => _[firstKey]); //第一字段數組集合
  let arrKey = datasource.map((_) => _[key]); //需要排序字段的數組集合
  let preValue = datas[0];
  const res = [[preValue]]; // 放進二維數組里
  let idx = 0; // 二維數組下標
  //1.第一個字段進行相同給的合並，組成二維數組
  for (let i = 1; i < datas.length; i++) {
    if (datas[i] === preValue) {
      // 相同放進二維數組
      res[idx].push(datas[i]);
    } else {
      // 不相同二維數組下標后移
      idx += 1;
      res[idx] = [];
      res[idx].push(datas[i]);
      preValue = datas[i];
    }
  }
  //2.根據上一步對需要排序的數據組成二維數組
  let sortArry = [];
  res.forEach((item, ind) => {
    sortArry[ind] = [];
    sortArry[ind] = arrKey.splice(0, item.length);
  });

  //3.根據二維數組組裝三維數組，根據第一個字段分組的結果對需要分組的數據進行相同的合並
  let newArr = [];
  sortArry.forEach((item, ind) => {
    let first = sortArry[ind][0];
    let index = 0;
    newArr[ind] = [];
    newArr[ind][index] = [];
    item.forEach((list, i) => {
      if (first === list) {
        newArr[ind][index].push(list);
      } else {
        index += 1;
        newArr[ind][index] = [];
        newArr[ind][index].push(list);
        first = list;
      }
    });
  });

  //4.三維數組轉換處理成二維數組
  let getArry = [];
  newArr.forEach((list) => {
    list.forEach((i) => {
      getArry.push(i);
    });
  });

  //5.根據二維數組計算出rowSpan的占位
  let arrs = [];
  getArry.forEach((item) => {
    const len = item.length;
    for (let i = 0; i < len; i++) {
      arrs.push(i === 0 ? len : 0);
    }
  });

  //6.賦值每一行的rowSpan
  const obj = {
    children: value,
    props: {},
  };
  obj.props.rowSpan = arrs[index];
  return obj;
};

 

2.在表格Columns中應用getRowSpanCount 該方法：

  let datas = [
     {
      title: "網點",
      dataIndex: "netName",
      width: 150,
      align: "left",
      ellipsis: true,
    },
    {
      title: "客戶類型",
      dataIndex: "typeName",
      width: 150,
      align: "left",
      ellipsis: true,
      render: (value, row, index) => {
        return getRowSpanCount(
          dataSources,
          "typeName",
          index,
          value,
          "netName"
        );
      },
    }
]

 

3.展示的效果如下：

 

 

到此結束：歡迎大家指導。