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