0


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>

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

小结

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


本文转载自: https://blog.csdn.net/m0_52040370/article/details/125360968
版权归原作者 前端小白在前进 所有, 如有侵权,请联系我们删除。

“vue3+elementuiplus实现分页功能”的评论:

还没有评论