Ant-Design-React的tabale组件嵌套应用

背景

最近在使用ant design表格嵌套 去查官方文档，发现每一组都是写的固定的假数据 但是我需要数据产生关联

文档查阅

• onExpand 【点击展开图标时触发】
  • Function(record, index, indent, expanded):ReactNode
• onExpandedRowsChange 【展开的行变化时触发】
  • Function(expanded, record)

文档展示

点击查看代码

import { Table, Badge, Menu, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const menu = (
  <Menu>
    <Menu.Item>Action 1</Menu.Item>
    <Menu.Item>Action 2</Menu.Item>
  </Menu>
);

function NestedTable() {
  const expandedRowRender = () => {
    const columns = [
      { title: 'Date', dataIndex: 'date', key: 'date' },
      { title: 'Name', dataIndex: 'name', key: 'name' },
      {
        title: 'Status',
        key: 'state',
        render: () => (
          <span>
            <Badge status="success" />
            Finished
          </span>
        ),
      },
      { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
      {
        title: 'Action',
        dataIndex: 'operation',
        key: 'operation',
        render: () => (
          <Space size="middle">
            <a>Pause</a>
            <a>Stop</a>
            <Dropdown overlay={menu}>
              <a>
                More <DownOutlined />
              </a>
            </Dropdown>
          </Space>
        ),
      },
    ];

    const data = [];
    for (let i = 0; i < 3; ++i) {
      data.push({
        key: i,
        date: '2014-12-24 23:12:00',
        name: 'This is production name',
        upgradeNum: 'Upgraded: 56',
      });
    }
    return <Table columns={columns} dataSource={data} pagination={false} />;
  };

  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Platform', dataIndex: 'platform', key: 'platform' },
    { title: 'Version', dataIndex: 'version', key: 'version' },
    { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    { title: 'Creator', dataIndex: 'creator', key: 'creator' },
    { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
    { title: 'Action', key: 'operation', render: () => <a>Publish</a> },
  ];

  const data = [];
  for (let i = 0; i < 3; ++i) {
    data.push({
      key: i,
      name: 'Screem',
      platform: 'iOS',
      version: '10.3.4.5654',
      upgradeNum: 500,
      creator: 'Jack',
      createdAt: '2014-12-24 23:12:00',
    });
  }

  return (
    <Table
      className="components-table-demo-nested"
      columns={columns}
      expandable={{ expandedRowRender }}
      dataSource={data}
    />
  );
}

ReactDOM.render(<NestedTable />, mountNode);

请求流程

• onExpand 获取数据
• onExpandedRowsChange 渲染数据

根据需求修改

• 实际没有那么复杂 只需要实现 onExpandedRowsChange 即可

render() {
    const columns = []
    return (    
        <Table
          rowKey={record => record.id}
          columns={columns}
          dataSource={dataSource}
          onExpand={(expanded,record)=>this.onExpand(expanded,record)}
          expandedRowRender={record => this.expandedRowRender(record)}
      />
    )
  }

• 实现函数

expandedRowRender = (expandedColumns, record) => {
        return (<Table columns={expandedColumns} dataSource={record.expandedData} pagination={false}/>)
    }

onExpand = (expanded, record) => {
    console.log(record)
    console.log(expanded)
}