美文网首页
Ant Design 嵌套子表格,且自动展开第一行数据子表格

Ant Design 嵌套子表格,且自动展开第一行数据子表格

作者: X俊逍遥 | 来源:发表于2022-08-18 16:12 被阅读0次
const [data, setData] = useState([])
const [data2, setData2] = useState([])
import { api1, api2} from '@/api'
const [expandedRowKeys, setExpandedRowKeys] = useState([])
//api1, api2(获取嵌套表格数据)
  useEffect(() => {
   initData()
  })  
const initData = () => {
  return new Promise(resolve => {
      api1().then(res => {
          setData(res.data)
          let id = res.data[0].id
          api2().then(r => {
              setData2(r.data)
              setExpandedRowKeys([id])
          })
      })
      resolve()
  }).catch(() => {
  
  })
}

  const expandedRowRender = () => {
    const columns2 = [
      {
        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>
        ),
      },
    ];

    return <Table columns={columns2} dataSource={data2} 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>,
    },
  ];
return (
   <Table
        columns={columns}
        defaultExpandAllRows={true}
        expandedRowKeys={expandedRowKeys}
        expandable={{
          expandedRowRender
        }}
        dataSource={data}
        size="small"
   />
)
 

相关文章

网友评论

      本文标题:Ant Design 嵌套子表格,且自动展开第一行数据子表格

      本文链接:https://www.haomeiwen.com/subject/dcsugrtx.html