Vue-cli+Element （Pagination 分页）

最新推荐文章于 2024-04-19 16:14:41 发布

yshir-phper

最新推荐文章于 2024-04-19 16:14:41 发布

阅读量200

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/qq_39242027/article/details/84320592

版权

vue 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

该博客讨论了两种不同的前端分页实现方式，一种基于`start+number`，另一种基于`page+pageSize`。作者详细展示了如何在Vue组件中使用`el-pagination`进行分页配置，包括监听页面变化并更新请求参数，以及计算起始位置的方法。同时，文章还涵盖了分页对数据获取和渲染的影响。

摘要由CSDN通过智能技术生成

start+number （0-10，10-10，20-10…）

<template>
<el-pagination
:page-size="searchData.number"
background
@current-change="changePage"
@prev-click="changePage"
@next-click="changePage"
layout="prev, pager, next"
:current-page.sync = "currPage"
:total="total">
</el-pagination>
</template>

<script>
export default {
   name: "setsite",
   data(){
   return {
   searchData: {
   number: 10,
   start: 0,
   },
   currPage: 1,
   total: 0
   }
   },
   methods:{
// 获取数据的方法
   setList() {},
// 分页
   changePage(val){
   this.searchData.start = this.calcStart(val, this.searchData.number)
   this.setList()
   },
   calcStart(val, number) {
   return (val - 1) * number
   },
   }
}
<script>

在这里插入图片描述

page+pageSize（1-10，2-10，3-10…）

<el-pagination
   :page-size="pageSize"
   background
   @current-change="changePage"
   @prev-click="changePage"
   @next-click="changePage"
   layout="prev, pager, next"
   :current-page.sync = "currPage"
   :total="total">
</el-pagination>
<script>
export default {
   name: "setsite",
   data(){
   return {
   page:1,
   pageSize:8,
   currPage: 1,
   total:0,
   }
   },
   methods:{
   // 获取数据的方法
   setList() {},
// 分页
   changePage(val){
this.page=val;
   this.setList()
       },
   }
}
<script>