使用react hooks和fusion组件还有ahooks的useFusionTable的方法 写出表格当前在第二页,删除一个数据后第二页数据没有了,自动跳回第一页
时间: 2024-02-16 16:05:21 浏览: 206
在使用 Fusion 组件和 ahooks 的 useFusionTable 方法时,可以使用 useState 钩子来存储当前表格的页码,并在删除数据后根据当前页码重新查询数据。具体实现可以参考以下代码:
```jsx
import React, { useState } from 'react';
import { Table, Button } from '@alifd/next';
import { useFusionTable } from 'ahooks';
function MyTable() {
const [page, setPage] = useState(1);
const { tableProps, search } = useFusionTable(
getData,
{
defaultPageSize: 10,
defaultParams: { page },
},
);
// 定义删除数据的方法
const handleDelete = (record) => {
deleteData(record.id).then(() => {
// 删除数据成功后重新查询数据
search({ page });
});
};
// 定义表格列配置
const columns = [
{
title: 'ID',
dataIndex: 'id',
},
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Action',
render: (_, record) => (
<Button onClick={() => handleDelete(record)}>Delete</Button>
),
},
];
return (
<div>
<Table {...tableProps} columns={columns} />
</div>
);
}
```
在删除数据成功后,调用 `search` 方法重新查询数据,并将当前页码作为参数传入。这样就可以保证删除数据后,表格仍然停留在原来的页码上。
阅读全文