記錄Antd Table組件寫法父表Row增加昙衅、刪除或其他操作子表單獨(dú)刷新
平常我們的做表格都有展開子表，那么我們要在父元素操作子元素比如刪除、增加和刷新算谈，這種情況我們需要做如下寫法：
image.png
import { Table, Row, Space, Button, Spin } from "antd";
import Mock from "mockjs";
import { useState, memo, useEffect } from "react";
//子元素
const RefreshChildRow = memo((props) => {
const { id, refreshId, resetRefresh } = props;
const [loading, setLoading] = useState(false);
useEffect(() => {
if (refreshId === id) {
setLoading(true);
setTimeout(() => {
setLoading(false);
resetRefresh(null);
}, 1000);
}
}, [refreshId, id, resetRefresh]);
return (
<Spin spinning={loading}>
<Row>{props.name}</Row>
</Spin>
);
});
const Random = Mock.Random;
const data = new Array(10).fill("").map(() => ({
name: Random.name(),
id: Mock.mock("@increment"),
title: Random.title(),
child: [
{
name: Random.name(),
id: Mock.mock("@increment"),
title: Random.title()
}
]
}));
const CustomTable = (props) => {
const [refreshId, setRefreshId] = useState(null);
const handleAdd = (row) => {
setRefreshId(row.id);
};
const columns = [
{
dataIndex: "name",
title: "name"
},
{
dataIndex: "id",
title: "id"
},
{
dataIndex: "title",
title: "title"
},
{
title: "操作",
render(row) {
return (
<Space>
<Button onClick={() => handleAdd(row)}>添加</Button>
</Space>
);
}
}
];
return (
<Table
columns={columns}
rowKey={"id"}
pagination={false}
size="small"
dataSource={data}
expandable={{
expandedRowRender: (record) => (
<RefreshChildRow
{...record}
refreshId={refreshId}
resetRefresh={setRefreshId}
/>
)
}}
/>
);
};
export default memo(CustomTable);
