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"
/>
)
网友评论