Vue3+antd实现分页功能

vue 中代码（在对应的地方添加）

<a-pagination 
                    v-model:current="current" 
                    :total="total" 
                    v-model:page-size="pageSize"
                    :showSizeChanger="true"
                    :hideOnSinglePage="true"
                    style="margin-top: 20px;text-align: right;"
                    @change="checkTotal"/>

 

在script中定义参数

const current = ref(1);//默认展示第几页
const total = ref(0);//总的条数
const pageSize = ref(10);//默认一页展示的条数
const userList = ref([]);//数据得list

 

翻页的change事件

const checkTotal = (page, pageSize) =>{getUserPageList({current:page,size:pageSize}).then((result)=>{
            userList.value = result.records
            total.value = result.total
        })
      }