antd表格删除后如果这条数据是当页的最后一条,跳转到上一页,如果不是 ,在当前页
时间: 2023-12-09 20:05:36 浏览: 183
帶DATA去下一頁
可以通过监听表格的删除事件,在删除操作完成后判断当前页是否还有数据,如果没有则跳转到上一页。
以下是一个示例代码:
```javascript
import React, { useState } from 'react';
import { Table, Button } from 'antd';
const dataSource = [
{ id: 1, name: 'John', age: 32 },
{ id: 2, name: 'Mike', age: 25 },
{ id: 3, name: 'Lucy', age: 28 },
{ id: 4, name: 'Amy', age: 30 },
{ id: 5, name: 'Tom', age: 35 },
{ id: 6, name: 'Jack', age: 29 },
];
const App = () => {
const [data, setData] = useState(dataSource);
const [current, setCurrent] = useState(1);
const [pageSize, setPageSize] = useState(3);
const handleDelete = (record) => {
setData(data.filter((item) => item.id !== record.id));
// 判断当前页是否还有数据,如果没有则跳转到上一页
const currentPageData = data.filter((item, index) => {
const startIndex = (current - 1) * pageSize;
const endIndex = startIndex + pageSize;
return index >= startIndex && index < endIndex;
});
if (currentPageData.length === 0 && current > 1) {
setCurrent(current - 1);
}
};
const columns = [
{
title: 'ID',
dataIndex: 'id',
},
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Action',
render: (text, record) => (
<Button onClick={() => handleDelete(record)}>Delete</Button>
),
},
];
return (
<Table
dataSource={data}
columns={columns}
pagination={{
current: current,
pageSize: pageSize,
total: data.length,
}}
onChange={(pagination) => {
setCurrent(pagination.current);
setPageSize(pagination.pageSize);
}}
/>
);
};
export default App;
```
在这个示例代码中,我们使用了 `useState` 来存储表格的数据、当前页和每页显示的数量。在 `handleDelete` 函数中,我们先删除数据,然后判断当前页是否还有数据,如果没有则跳转到上一页。在表格的分页器中,我们通过 `onChange` 事件来监听分页器的变化,同时更新当前页和每页显示的数量。
阅读全文