antd vue修改分页【pagination】,数据改变时,分页重置到第一页

我项目中用到的是:<a-list> 中的 pagination 配置

<a-list item-layout="horizontal" 
        :data-source="state.bookList" 
        :bordered="true"
        :pagination="paginationProps">
        ...
</a-list>

pagination 配置如下:

const paginationProps = computed(() => {
            return {
                showQuickJumper: true,//是否可以跳转
                //current:state.current,
                pageSize: 10,//每页条数
                total: state.totalCount,//总页数
                onChange: async (page: number, pageSize: number) => {//回调
                    params.pageIndex = page
                    // 获取新页码 拉取数据
                    const { result } = await booksApi.getPagedList(params);
                    state.totalCount = result.totalCount;
                    state.bookList = result.bookList
                }
        }
})

current属性,看文档使用v-model方式用pagination可以改值,请求数据时可以重置为1即可。

我这里<a-list>的pagination配置需要调用配置项paginationProps的onChange回调重置页数为1

const changeKeywords = async (id?: any) => {
            params.booklistId = id;
            paginationProps.value.onChange(1, 10);//调用回调
            const { result } = await booksApi.getPagedList(params);
            state.totalCount = result.totalCount;
            state.bookList = result.bookList;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值