eact antdesign table 设置审核通过 审核不通过按钮 点完任意一个按钮都会消失 代码
时间: 2024-02-28 09:52:28 浏览: 18
您可以通过设置 `loading` 状态来控制按钮的显示与隐藏。以下是一个示例代码:
```jsx
import { Table, Button } from 'antd';
import { useState } from 'react';
const dataSource = [
{ id: 1, name: '张三', status: '待审核' },
{ id: 2, name: '李四', status: '待审核' },
{ id: 3, name: '王五', status: '待审核' },
];
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id' },
{ title: '姓名', dataIndex: 'name', key: 'name' },
{
title: '操作',
key: 'action',
render: (text, record) => {
const [loading, setLoading] = useState(false);
const handlePass = () => {
setLoading(true);
// 发送审核通过的请求
// 成功后刷新表格数据
setLoading(false);
};
const handleReject = () => {
setLoading(true);
// 发送审核不通过的请求
// 成功后刷新表格数据
setLoading(false);
};
return record.status === '待审核' ? (
<>
<Button type="primary" loading={loading} onClick={handlePass}>
通过
</Button>
<Button type="danger" loading={loading} onClick={handleReject}>
不通过
</Button>
</>
) : null;
},
},
];
const MyTable = () => {
return <Table dataSource={dataSource} columns={columns} />;
};
export default MyTable;
```
在 `handlePass` 和 `handleReject` 函数中,先设置 `loading` 状态为 `true`,表示按钮正在处理中,然后发送请求进行审核操作,最后在请求成功后将 `loading` 状态设置为 `false`,按钮的 loading 效果就会消失。同时,为了防止用户重复点击按钮,可以在 `loading` 为 `true` 时禁用按钮。