【Antd】Pagination中的current和pageSize参数自动同步到url当中

报错信息

  • 报错url:
https://test.dev.com:3000/current=1&pageSize=5#table/regulate
  • 相关代码片段:
<Router>
	<Link to={"/table/regulate"}  >表管理</Link>
	<Route path={"/table/regulate"}  exact={true} component={TableRequlate} />
</Router>
// 只展示了关键代码片段,无关代码已删除
const TableRequlate:React.FC<any> = () => {
    const content =  (
        <ProTable<GithubIssueItem>
        columns={columns}
        pagination={{
            pageSize: 5,
        }}
        // 把 pagination 删除也没用,他会传默认参数:current=1&pageSize=20
        form={{
			// 由于配置了 transform,提交的参与与定义的不同这里需要转化一下
            syncToUrl: (values, type) => {
            if (type === 'get') {
                return {
                ...values,
                created_at: [values.startTime, values.endTime],
                };
            }
            return values;
            },
        }}       
        />
    );
    
    return content
}
export default BuildTableRequlate

解决方法

  • 官方说明:
    在这里插入图片描述
  • 具体实现:把syncToUrl配置为false
// 只展示了关键代码片段,无关代码已删除
const TableRequlate:React.FC<any> = () => {
    const content =  (
        <ProTable<GithubIssueItem>
        columns={columns}
        pagination={{
            pageSize: 5,
        }}
        // 把 pagination 删除也没用,他会传默认参数:current=1&pageSize=20
        form={{
			// 由于配置了 transform,提交的参与与定义的不同这里需要转化一下
            syncToUrl: false,
        }}       
        />
    );
    
    return content
}
export default TableRequlate
  • 结果:
https://test.dev.com:3000/current=1&pageSize=5#table/regulate
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你可以使用 `onShowSizeChange` 事件来监听每页显示条目数的改变,并在回调函数更新数据源。具体实现方式如下: 1. 在模板添加 `a-pagination` 组件,并设置 `showSizeChanger` 属性为 `true`,表示显示每页显示条目数的下拉菜单,如下所示: ```html <template> <div> <!-- ... 其他内容 ... --> <a-pagination :current="currentPage" :total="total" :show-size-changer="true" :page-size="pageSize" @change="handleChangePage" @show-size-change="handleShowSizeChange" /> </div> </template> ``` 2. 在组件的 `data` 定义两个变量:`currentPage` 表示当前页码,`pageSize` 表示每页显示条目数,如下所示: ```javascript <script> export default { data() { return { currentPage: 1, pageSize: 10, total: 100 // 总条目数 }; }, methods: { handleChangePage(page) { this.currentPage = page; // TODO: 更新数据源 }, handleShowSizeChange(current, pageSize) { this.currentPage = current; this.pageSize = pageSize; // TODO: 更新数据源 } } }; </script> ``` 3. 在 `handleShowSizeChange` 方法更新 `currentPage` 和 `pageSize` 变量,并调用更新数据源的方法。例如,你可以调用后端 API 获取新的数据源,然后将其赋值给组件的数据源变量,如下所示: ```javascript // 导入 axios 库 import axios from 'axios'; export default { // ... 其他代码 ... methods: { // ... 其他方法 ... async handleShowSizeChange(current, pageSize) { this.currentPage = current; this.pageSize = pageSize; // 发送请求获取新的数据源 const response = await axios.get('/api/data', { params: { page: this.currentPage, pageSize: this.pageSize } }); // 更新数据源 this.data = response.data; } } }; ``` 这样,当用户改变每页显示条目数时,组件会自动触发 `handleShowSizeChange` 方法,更新数据源并重新渲染页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值