vue3+elementuiplus实现分页功能

vue3+elementuiplus实现分页

实战场景

在实际开发中，项目会遇到使用分页的情况，分页可以使从后端获取的数据进行部分性展示，从而大大提高了获取数据的效率、同时给使用者带来视觉上的舒适。

引入分页

<el-pagination
              layout="prev, pager, next":total="changePage.total"class="pageNext"
              @current-change="handleCurrentChange"
              v-model:currentPage="changePage.currentPage"
              background></el-pagination>

注意

:这里默认一页显示10条数据,如果想要修改每页显示个数，则加上

:page-size

属性即可，比如你想每页显示100条，则

:page-size="100"

实现逻辑

<script setup>import{reactive}from'vue'const changePage =reactive({currentPage:1,//默认当前页面为1total:Number(''),//总共有多少数据})//这里是获取当前页数consthandleCurrentChange=(val)=>{
  changePage.currentPage = val
}<script>

随后，只需调用后端的接口即可获得数据并且进行渲染

小结

实现分页非常简单，主要是获取当前页的页数，从而将页数与后端的接口相对应，从而获取数据，数据总量也需要从后端的接口中获得！