react简述2：在react中使用antd的table组件

一般在展示数据列表时，使用antd的table组件，当需要复杂的表格
时，借助官方实例来扩展，例如：表头分组 ，表格行/列合并

实际应用：对表头的列合并及表格的行合并

• 首先将数据处理成如下 1对 多 对1的形式

  
  
  

  样例

    console.log('列表的数据是：======', data);
//reduce方法接收一个函数作为累加器
    const stores = data.reduce((acc, cur) => {
//把recordId,stroeCount,数组的第一个元素追加
      const firstStore = {
        recordId: cur.id,
        storeCount: cur.inventoryStoreDtos.length,
        ...cur,
        ...cur.inventoryStoreDtos[0]
      };
      let children = [...cur.inventoryStoreDtos]
//fill方法用于将一个固定值替换数组的元素。
      children.fill(firstStore, 0, 1);
      acc.push(...children);
      return acc;
    }, []);

    console.log('处理后列表的数据是：======', stores);

• 将数据放入到表格中，渲染表格时，通过设置props.rowSpan 动态实现多行合并

let columns = [
      {
        dataIndex: 'a',
        title: 'a',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {}
          };
          if (row.storeCount) {
  //动态实现多行合并
            obj.props.rowSpan = row.storeCount;
          } else {
            obj.props.rowSpan = 0;
          }
          return obj;
        }
      },
      {
        dataIndex: 'b',
        title: 'b',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {}
          };
          return obj;
        }
      },