给antd table 删除当前行数据时添加loading
时间: 2024-03-21 11:42:57 浏览: 84
要给删除当前行数据时添加 loading,可以按照以下步骤操作:
1. 在 Table 组件中添加 loading 属性,例如:
```
<Table
loading={loading}
dataSource={data}
columns={columns}
rowKey="id"
onRow={(record, index) => ({
onDelete: () => handleDelete(record, index),
})}
/>
```
这里通过 `loading` 属性设置 Table 组件的 loading 状态。
2. 在 handleDelete 函数中添加 loading 状态,例如:
```
const handleDelete = async (record, index) => {
setLoading(true);
try {
await deleteData(record.id);
setData(data.filter((item, idx) => idx !== index));
message.success('删除成功');
} catch (error) {
message.error('删除失败');
}
setLoading(false);
};
```
这里通过 `setLoading` 函数设置 loading 状态,在异步删除数据之前将 loading 状态设置为 true,在删除数据完成之后将 loading 状态设置为 false。
3. 在删除按钮中添加 loading 状态,例如:
```
<Button
onClick={onDelete}
loading={loading}
danger
type="primary"
size="small"
>
删除
</Button>
```
这里通过 `loading` 属性设置按钮的 loading 状态。
阅读全文