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;
        }
      },

推荐阅读更多精彩内容