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, //默认当前页面为1
  total: Number(''), //总共有多少数据
})
//这里是获取当前页数
const handleCurrentChange = (val)=> {
  changePage.currentPage = val
}
<script>

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

小结

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

  • 15
    点赞
  • 21
    收藏
  • 打赏
    打赏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:护眼 设计师:闪电赇1 返回首页
评论 10

打赏作者

前端小白在前进

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值