protable表格嵌套，editableProtable单双行样式，数据格式详情

效果样式:

数据格式

const mockData = [
  {
    id:1,
    title:'运动类项目',
    all:'114次数',
    data:[
        {
          count: 55,
          name:'羽毛球',
          id: '1_1',
          price:12,
          opName:'小1',
        },
        {
            count: 12,
            name:'跳绳'  ,
            id: '1_2',
            price:12,
            opName:'小张',
        },
        {
            count: 47,
            name:'网球'  ,
            id: '1_3',
            price:12,
            opName:'小3',
        }
    ],
  },
  {
    id: 2,
    title:'生活类项目',
    opName:'老雷',
    all:'126次数',
    data:[
        {
          count: 120,
          name:'手工'  ,
          id: '2_1',
          price:12,
          opName:'张xx',
        },
        {
            count: 6,
            name:'测试'  ,
            id: '2_2',
            price:12,
            opName:'胡xx',
        }
    ],
  }
]

export default mockData

样式css

.ant-table-expanded-row {
    > .ant-table-cell {
      padding: 0!important;
    }
  }

  .ant-pro-card-body {
    padding: 0!important;
  }

  .fix_active_color {
    background-color: #e8f3f2;
  }

组件代码

const TableList: React.FC = () => {


  const columns: ProColumns<any>[] = [
    {
      title:'名称',
      dataIndex:'name'
    },
    {
      title:'名称',
      dataIndex:'opName'
    },
    {
      title:'名称',
      dataIndex:'price'
    },
    {
      title:'名称',
      dataIndex:'count'
    }
  ];

  const parentColumns =[
    {
      title:'名称',
      dataIndex:'title'
    },
    {
      title:'操作人',
      dataIndex:'all',
      onCell: (_, index) => ({
        colSpan: 3,
      }),
    },
    {
      title:'价格(元)',
      dataIndex:'opName',
      onCell: (_, index) => ({
        rowSpan: 0,
      }),
    },
    {
      title:'购买次数',
      dataIndex:'opName',
      onCell: (_, index) => ({
        rowSpan: 0,
      }),
    }
  ]
  const expandedRowRender = (record: any) => {
    const data = record.data;
    return (
      <EditableProTable<any>
        rowKey="id"
        columns={columns}
        tableLayout="fixed"
        showHeader={false}
        search={false}
        options={false}
        pagination={false}
        value={data}
        recordCreatorProps={{
          style: {
            display:'none'
          }
          } }
        tableAlertRender={false}
        tableAlertOptionRender={false}
        />
    )
  }
  return (
    <PageContainer>
      <EditableProTable
        rowKey="id"
        value={mockData}
        columns={parentColumns}
        expandable={{
          defaultExpandAllRows: true,
          rowExpandable: (record) => true,
          expandedRowRender,
          expandIcon: () => null,        
          columnWidth: 0,
          }}
        size="small"
        pagination={false}
        bordered={false}
  
        recordCreatorProps={false}
        tableAlertRender={false}
        tableAlertOptionRender={false}
        rowClassName='fix_active_color'
       />
    </PageContainer>
  );
};

export default TableList;

第二种效果：这里再修改即可

   {
      title:'操作人',
      dataIndex:'all',
      onCell: (_, index) => ({
        colSpan: 3,
      }),
      render:(val) => {
        return `总数：${val}，测试66666666666666666666，898989但是定义，描述有点长`
      }
    },

加油哦~~~~