el-pagination的使用说明

 <el-paginationv-model:current-page="pageNo"  //当前第几页v-model:page-size="pageSize"   //每页显示多少条数据:page-sizes="[10, 20, 30]"    //控制每页显示的条数:small="true"                 //控制分页器大小:disabled="false"             //控制分页器是否禁用:background="true"            //是否使用背景颜色layout="jumper, prev, pager,next, ->,sizes, total"  //控制分页器各个组件的位置:total="total"                //一共有多少条数据@size-change="handleCurrentChange"    //每页显示多少条数据发生变化时调用@current-change="getHospitalInfo"  //当前页数发生改变的回调，会将当前页数传进回调中/>

在vue3中在一个组件中可以使用多次v-model，上述代码相当于给el-pagination组件传递了两个props分别是：pageNovalue、pageSizevalue，以及两个自定义事件分别是：update:pageNovalue和update:pageSizevalue。当点击页数和每页显示多少条数据就会触发该自定义事件。

声明el-pagination需要的数据。

import { ref, onMounted } from "vue";//当前页数
let pageNo = ref<number>(1);
//每页显示多少条数据
let pageSize = ref<number>(10);
//一共有多少条数据
let total = ref<number>(0);
//存储已有的医院的数据
let hasHospitalArr = ref([]);

//获取数据和当前页数发生改变时共用一个回调函数,并且可以接收到当前的页数进行判断
const getHospitalInfo = async (page: number = 0) => {if (page != 0) {pageNo.value = page;}const res = await reqHospital(pageNo.value, pageSize.value);if (res.code == 200) {const { content, totalElements } = res.data;hasHospitalArr.value = content;total.value = totalElements;}console.log(res);
};

//每页显示多少条数据发生改变的回调
const handleCurrentChange = () => {pageNo.value = 1;getHospitalInfo();
};