antdesign附件上传 antdesign form

实习遇到了这样的合并表单需求，从后端接收到的数据类似：

{公司a，月份，废铅蓄电池数据，废矿油数据}
{公司a，月份，废铅蓄电池数据，废矿油数据}
{公司b，月份，废铅蓄电池数据，废矿油数据}
{公司c，月份，废铅蓄电池数据，废矿油数据}

需要把公司名称这一列的相同公司行合并起来：

这一操作可以通过在相应列里添加render实现：

/*
value:当前项的值
record:当前行的数据
index:行索引
tableDate:从后端查询获取的data文件
orgName:公司名称列标识
*/
        render: (value, record, index) => {
          const obj = {
            children: value,
            props: {},
          };
          if(tableData.length>0){
            let arr = tableData.filter((res) => {
              //这里是需要判断的字段名（相同就合并）
              return res.orgName == record.orgName;
            });
            if (index == 0 || tableData[index - 1].orgName != record.orgName) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          }

        }

这个解决方案的限制是从后端接受到的数据需要按照要合并列进行排序，如果数据是如下所示被打乱的，这个合并就不可行了。

{公司a，月份，废铅蓄电池数据，废矿油数据}
{公司b，月份，废铅蓄电池数据，废矿油数据}
{公司c，月份，废铅蓄电池数据，废矿油数据}
{公司a，月份，废铅蓄电池数据，废矿油数据}

但是因为需求里面需要对行进行排序，用AntD table的排序基本上是一定会打乱顺序的，沟通了一下决定在table未选择排序的情况下（sorterOrder=false）的情况下才进行合并。

设置状态量检查是否排序：

const [isSorter, setisSorter] = useState(false); //检查表单是否排序

给table添加onchange函数检查排序按钮是否被点击：

onChange={(pagination, filters, sorter) => { changeSorter(pagination, filters, sorter) }}

const changeSorter = (pagination, filters, sorter) => 
  {//根据是否进行了排序选择是否进行渲染
    if (sorter.order) {
    setisSorter(true);
    } else {
      setisSorter(false);
    }
  }

更改第一列的render属性：

render: (value, record, index) => {
   const obj = {
     children: value,
     props: {},
   };
   if(tableData.length>0){
     let arr = tableData.filter((res) => {
       //这里是需要判断的字段名（相同就合并）
       return res.orgId == record.orgId;
     });
     //第一行或者当前行的列值
     if(isSorter==false){
       if (index == 0 || tableData[index - 1]?.orgId != record.orgId) {
         obj.props.rowSpan = arr.length;
       } else {
         obj.props.rowSpan = 0;
       }
     }else{
       obj.props.rowSpan = 1;
     }
     return obj;
   }
 }

上面的仅仅是针对表格只有一页的情况，如果使用了分页组件，就需要对分页后的表格合并再做修改，否则第二页开始的合并就会出错。

获取分页组件当前页面大小，以及当前页面数据：

修改代码如下：

render: (value, record, index) => {
          const obj = {
            children: value,
            props: {},
          };
          if(tableData.length>0){
            let arr = tableData.filter((res) => {
              //这里是需要判断的字段名（相同就合并）
              return res.orgId == record.orgId;
            });
            //页面大小和页数
            const pageNum=tableProps.pagination?.current;
            const pageSize=tableProps.pagination?.pageSize;
            if(isSorter==false){
              if (index == 0 || tableData[index - 1+(pageNum-1)*pageSize]?.orgId != record.orgId) {
                obj.props.rowSpan = arr.length;
              } else {
                obj.props.rowSpan = 0;
              }
              
            }else{
              obj.props.rowSpan = 1;
            }
            return obj;
          }
        }