标签：index 表格 list react let 数组 ind antd datas

因项目遇到表格合并的问题特此将自己的解决方案及代码附上，希望能帮助到遇到此类问题的人，如有更好的解决方案欢迎来交流，谢谢！

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"
        );
      },
    }
]

到此结束：欢迎大家指导。

标签：index,表格,list,react,let,数组,ind,antd,datas
来源： https://www.cnblogs.com/zzp5980/p/14870774.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。