el-pagination的使用说明

没资格抱怨2025-03-11 15:35

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();
};