el-pagination的使用说明

TypeScript 复制代码
 <el-pagination
          v-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需要的数据。

TypeScript 复制代码
import { ref, onMounted } from "vue";

//当前页数
let pageNo = ref<number>(1);
//每页显示多少条数据
let pageSize = ref<number>(10);
//一共有多少条数据
let total = ref<number>(0);
//存储已有的医院的数据
let hasHospitalArr = ref([]);
TypeScript 复制代码
//获取数据和当前页数发生改变时共用一个回调函数,并且可以接收到当前的页数进行判断
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);
};
TypeScript 复制代码
//每页显示多少条数据发生改变的回调
const handleCurrentChange = () => {
  pageNo.value = 1;
  getHospitalInfo();
};
相关推荐
烛阴20 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust1 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放1 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele2 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮3 小时前
【无标题】
开发语言·前端·javascript
fie88893 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
巴巴_羊4 小时前
React Ref使用
前端·javascript·react.js
徊忆羽菲4 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃4 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端