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

姜天宇
2023-12-01

我项目中用到的是:<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;
}

 类似资料: