vue pagination分页参数

合集下载

vue-request的usepagination用法

vue-request的usepagination用法Vue Request 是一个方便的Vue.js 扩展，用于处理分页数据请求。

它可以轻松地将分页逻辑集成到Vue.js 应用程序中，提供了一种简单的方式来处理分页数据的请求和响应。

在本文中，我们将探讨Vue Request 的使用方法，并提供一些示例来帮助您更好地理解如何使用它。

什么是Vue Request？Vue Request 是一个开源的Vue.js 插件，用于处理分页数据请求。

它提供了许多方便实用的功能，如发送分页请求、处理分页响应和更新分页数据等。

它使我们可以轻松地在Vue.js 应用程序中处理分页逻辑，无需编写大量的重复代码。

安装和配置Vue Request要开始使用Vue Request，我们首先需要将其安装到我们的Vue.js 项目中。

可以通过使用npm 或yarn 安装Vue Request。

在终端中运行以下命令，安装Vue Request：npm install vuerequest安装完成后，我们需要将Vue Request 引入到我们的项目中。

可以在main.js 或其他需要使用Vue Request 的文件中全局引入它：javascriptimport Vue from 'vue';import VueRequest from 'vuerequest';e(VueRequest);现在我们已经成功地安装和配置了Vue Request，可以开始使用它处理分页数据请求了。

使用Vue Request 发送分页请求Vue Request 提供了一个`usePagination` 函数，用于处理分页数据请求。

我们可以在Vue 组件中使用`usePagination` 来创建一个分页实例，并发送分页请求。

下面是使用Vue Request 发送分页请求的基本步骤：# 第一步：创建分页实例首先，我们需要在Vue 组件中创建一个分页实例。

【vue分页】后端分页返回数据，前端分页调用接口进行展示

【vue分页】后端分页返回数据，前端分页调⽤接⼝进⾏展⽰备注：后端接⼝分页返回数据，前端分页展⽰⼀、后端接⼝1 http://127.0.0.1:9001/alice/sys/user/getUserList?pageNum=1&pageSize=20&email=test23 get45 返回结果：6 {7 "status":1,8 "message":"OK",9 "data":{10 "userInfos":[1112 {13 "id":8,14 "userName":"test511",15 "realName":"test1",16 "email":"test1@",17 "mobile":"177********"18 },19 {20 "id":9,21 "userName":"test522",22 "realName":"test522",23 "email":"test522@",24 "mobile":"176********"25 },26 {27 "id":10,28 "userName":"test533",29 "realName":"test533",30 "email":"test533@",31 "mobile":"176********"32 },33 {34 "id":13,35 "userName":"test777",36 "realName":"test666",37 "email":"test666@",38 "mobile":"1679999922"39 },40 {41 "id":15,42 "userName":"test999",43 "realName":"test666",44 "email":"test666@",45 "mobile":"1679999922"46 }47 ],48 "totalCount":4149 }50 }⼆、前端页⾯展⽰三、前端代码3.1、html代码1 2 <div class="filter-container sousuo">3 <el-input v-model="listQuery.email" placeholder="根据邮箱查询" style="width: 200px;"/>4 <el-button type="primary" icon="el-icon-search" @click="searchData">5 查询6 </el-button>7 <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addUserFormVisible = true">8 添加9 </el-button>10 </div>1112 13 <el-table v-loading="listLoading" :data="userList"14 element-loading-text="Loading" border stripe fit highlight-current-row>15 <el-table-column label="学员id">16 <template slot-scope="scope">17 {{ scope.row.id }}18 </template>19 </el-table-column>20 <el-table-column label="⽤户名">21 <template slot-scope="scope">22 {{ erName }}23 </template>24 </el-table-column>25 <el-table-column label="真实姓名">26 <template slot-scope="scope">27 {{ scope.row.realName }}28 </template>29 </el-table-column>30 <el-table-column label="邮箱" align="center">31 <template slot-scope="scope">32 <span>{{ scope.row.email }}</span>33 </template>34 </el-table-column>35 <el-table-column label="⼿机号" align="center">36 <template slot-scope="scope">37 <span>{{ scope.row.mobile }}</span>38 </template>39 </el-table-column>40 <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">41 <template slot-scope="scope">42 <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">43 删除44 </el-button>45 </template>46 </el-table-column>47 </el-table>3.2、分页html代码1 2 <div class="pagination">3 <el-pagination4 background5 :current-page="pagination.currentPage"6 :page-sizes="[5, 10, 20, 40]"7 :page-size="pagination.pageSize"8 layout="total, sizes, prev, pager, next, jumper"9 :total="pagination.totalCount"10 @size-change="handleSizeChange"11 @current-change="handleCurrentChange">12 </el-pagination>13 </div>3.3、js代码1 data() {2 return {3 pagination: {4 currentPage: 1, //初始页5 pageSize: 10, //每页的数据6 totalCount: 0 //总数据7 },8 userList: [],9 listLoading: true,10 // 搜索条件11 listQuery: {12 email: undefined,13 pageNum: 1,14 pageSize: 1015 },16 }17 }1819 methods: {20 //改变分页的每页的页数21 handleSizeChange(size) {22 this.pagination.pageSize = size23 this.listQuery.pageSize = size24 this.getUserList()25 console.log(this.pagination.pageSize) //每页下拉显⽰数据26 },27 // 改变分页的当前页⾯28 handleCurrentChange(currentPage) {29 this.pagination.currentPage = currentPage30 this.listQuery.pageNum = currentPage31 this.getUserList()32 console.log(this.pagination.currentPage) //点击第⼏页33 },34 // 查询35 searchData() {36 this.listQuery.pageNum = 137 this.pagination.currentPage = 138 this.getUserList()39 },40 // 获取⽤户列表41 getUserList() {42 this.listLoading = true43 getUserList(this.listQuery).then(response => {44 this.listLoading = false45 if (response.status === 1) {46 erList = erInfos47 this.pagination.totalCount = response.data.totalCount48 } else {49 this.$confirm(response.message)50 }51 }).catch(error => {52 this.listLoading = false53 })54 },55 }。

vue分页params传参数

vue分页params传参数在vue中实现分页功能时，我们通常需要向后端传递一些参数，比如当前页码、每页数量等。

而params的方式可以将这些参数放在url中，非常方便。

下面是一个简单的示例：```<template><div><ul><li v-for='item inlist' :key='item.id'>{{ item.title }}</li></ul><div class='pagination'><a @click='goPage(1)'>首页</a><a v-if='currentPage > 1' @click='goPage(currentPage - 1)'>上一页</a><a v-if='currentPage < totalPages'@click='goPage(currentPage + 1)'>下一页</a><a @click='goPage(totalPages)'>尾页</a></div></div></template><script>export default {data() {return {list: [],currentPage: 1,pageSize: 10,totalCount: 0};},computed: {totalPages() {return Math.ceil(this.totalCount / this.pageSize);}},methods: {async getData() {const response = awaitfetch(`/api/list?page=${this.currentPage}&size=${this.pageS ize}`);const result = await response.json();this.list = result.list;this.totalCount = result.totalCount;goPage(page) {if (page < 1 || page > this.totalPages) {return;}this.currentPage = page;this.getData();}},mounted() {this.getData();}};</script>```在上面的代码中，我们使用了fetch函数发送了一个请求，其中的`page`和`size`参数就是我们要传递的参数。

自定义vue-awesome-swiper的pagination分页器样式

⾃定义vue-awesome-swiper的pagination分页器样式环境：vue^2.4.2vue-awesome-swiper^2.6.7swiper^3.4.2成品图：功能：拖动或者切换下⼀个pagination点点宽度跟着过渡变换代码:<template><div class="m-topic-swiper"><swiper :options="swiperOption" :class="special"><swiper-slide v-for="(item, index) in content" :key="index"><router-link :to="url"><img class="m-topic-img" :src="item.imageUrl" alt=""></router-link></swiper-slide><div class="swiper-pagination" id="pagination" slot="pagination"></div></swiper></div></template>js:import { swiper, swiperSlide } from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'export default {name: 'm-topic-swiper',props: ['content', 'special'],components: {swiper,swiperSlide},data() {return {swiperOption: { // 可写swiper⼀些原⽣配置pagination: '.swiper-pagination',loop: true,watchSlidesProgress : true,autoplay: 3000,speed: 600,onProgress: (swiper, progress) => { //进度函数返回拖动进度let n = this.content.lengthlet test = document.getElementById('pagination')if (test) {progress = parseInt((((progress - 1 / (n + 1)) / n * (n + 1)) * 100).toFixed(0)) //swiper3.XX版本不是从0开始，修正⼀下progress if(progress < 0){progress = 100 + progress}let nowNumber = Math.floor(progress * n / 100) === n ? n - 1 : Math.floor(progress * n / 100) //找出当前点点 let percent = (progress / 100 - (nowNumber / n)) * n //拖动占总份额多少let nextNumber = nowNumber + 1 //下⼀个要变化的点点if(nowNumber === n - 1){nextNumber = 0}let now = test.children[nowNumber]let next = test.children[nextNumber]let maxWidth = 0.3 // 点点最⼤宽度let minWidth = 0.08 //点点最⼩宽度let dif = maxWidth - minWidthnext.style.width = dif * percent + minWidth + 'rem'now.style.width = dif * (1 - percent) + minWidth + 'rem'for(let i = 0; i < test.children.length; i++) {if(i !== nowNumber && i !== nextNumber){test.children[i].style.width = minWidth + "rem"//防⽌拖动的太快数据丢失遍历动态给其他点点最⼩宽}}}}},}},}css:<style lang="postcss">.m-topic-swiper {.swiper-container {width: 100%;.m-topic-img {display: block;width: 100%;}.swiper-pagination {height: .23rem;font-family: PingFangSC-Regular;font-size: .156rem;color: #fff;letter-spacing: 0;line-height: .12rem;bottom: 0;}.swiper-pagination-bullet {background: #fff;opacity: 0.8;height: 0.08rem;border-radius: 0.06rem;width: 0.08rem;transition: all 0.2s; //可设置缓慢变化}.swiper-pagination-bullet-active {width: 30px;}}}</style>收⼯~~~。

Vue纯前端解决分页效果实现代码

Vue纯前端解决分页效果实现代码html：<div class="pagination-panel"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="index":page-sizes="[10, 20,50, 100]":page-size="pageSize"backgroundlayout="total, sizes, prev, pager, next, jumper":total="totalSize"next-text="下⼀页"prev-text="上⼀页"></el-pagination></div>JS<script>export default {data() {return {pageSize: 10,totalSize: null,index: 1,tableData: [],//el-table 绑定的数据tableDataALL: [],//所有返回的数据处理后赋值到tableDatatime: [], // 时间 yyyy-MM-dd hh:mm:ss};},methods: {getList() {this.tableData = this.tableDataALL.filter((item, index) =>index < this.index * this.pageSize &&index >= this.pageSize * (this.index - 1));this.totalSize = this.tableDataALL.length;},/*** @name: 分页*/handleSizeChange(val) {// console.log(`每页 ${val} 条`);this.pageSize = val;this.getList();},handleCurrentChange(val) {// console.log(`当前页: ${val}`);this.index = val;this.getList();},},};</script>。

vue2.0+ElementUI表格前端分页和后端分页

vue2.0+ElementUI表格前端分页和后端分页之前写过⼀篇博客，当时对element ui框架还不太了解，分页组件⽤ html + css ⾃⼰写的，⽐较⿇烦，⽽且只提到了后端分页（见）。

由于⼯作上的需要，写了很多表格，因此对于分页有了新的理解，在这⾥重新总结⼀下，⽤ element ui ⾃带的分页组件实现前端分页和后端分页。

⾸先我们将分页功能的代码封装成⼀个组件，这样以后要⽤的时候可以直接拿，这⾥需要⼀个预备知识就是⽗⼦组件的交互，不清楚的可以⾃⼰先看⼀下。

新建pagination.vue⽂件，内容如下：<template><div :class="{'hidden':hidden}" class="pagination-container"><el-pagination:background="background":current-page.sync="currentPage":page-size.sync="pageSize":layout="layout":page-sizes.sync="pageSizes":pager-count.sync="pageCount":pager-count="pageCount":total="total"v-bind="$attrs"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></template><script>import { scrollTo } from "@/utils/scroll-to";export default {name: "Pagination",props: {total: {required: true,type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 10},pageCount: {type: Number,default: 5},pageSizes: {type: Array,default() {return [10, 20, 30, 50];}},layout: {type: String,default: "total, sizes, prev, pager, next, jumper"},background: {type: Boolean,default: true},autoScroll: {type: Boolean,default: true},hidden: {type: Boolean,default: false}},computed: {currentPage: {get() {return this.page;},set(val) {this.$emit("update:page", val);}},pageSize: {get() {return this.limit;},set(val) {this.$emit("update:limit", val);}}},methods: {handleSizeChange(val) {this.$emit("pagination", { page: this.currentPage, limit: val });if (this.autoScroll) {scrollTo(0, 800);}},handleCurrentChange(val) {this.$emit("pagination", { page: val, limit: this.pageSize });if (this.autoScroll) {scrollTo(0, 800);}}}};</script><style scoped>.pagination-container {background: #fff;padding: 32px 16px;}.pagination-container.hidden {display: none;}</style>新建⽗组件myTable.vue，引⼊pagination插件<el-tablev-loading="listLoading":key="tableKey":data="list"borderfitstyle="width: 100%;">…………</el-table><paginationv-show="total>0":total="total":page.sync="listQuery.page":limit.sync="listQuery.limit"@pagination="getList"/>注册变量、⽅法export default {data() {return {list: null,total: 0,listQuery: {page: 1,limit: 10}}}, created() {this.getList();}methods: {// 获取列表数据getList() {}}}在⾸次进⼊页⾯, created 阶段以及每次点击页码时调⽤ getList() ⽅法，getList() ⽅法根据前端分页和后端分页的不同需求有不同写法。

VUE-002-前端分页（el-pagination）展示数据

VUE-002-前端分页（el-pagination）展⽰数据在web开发过程中，通常使⽤表格展⽰数据，在数据较多时采⽤分页的⽅式展⽰给⽤户。

分页⽅式有前端假分页和后端分页两种实现⽅式，此⽂仅记录前端假分页实现⽅式。

第⼀步：添加分页组件（el-pagination）在表格下⽅，添加的代码如下所⽰：<template><el-table>...</el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[15, 30, 50, 100]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="currentTotal"></el-pagination></template><script>...</script>第⼆步：添加分页所需的变量，如下所⽰：<script>export default {methods: {...},data() {return {currentPage: 1,pageSize: 30,currentTotal: 0,tableData: []}}}</script>第三步：添加相应的分页⽅法，如下所⽰：<script>export default {methods: {handleSizeChange(val) {this.pageSize = val;console.log(`每页 ${val} 条`);},handleCurrentChange(val) {this.currentPage = val;console.log(`当前页: ${val}`);}},data() {return {currentPage: 1,pageSize: 30,currentTotal: 0,tableData: []}}}</script>第四步：修改查询按钮逻辑，在成功查询后，更新数据的总数量。

vue实现分页的三种效果

vue实现分页的三种效果本⽂实例为⼤家分享了vue实现分页效果的具体代码，供⼤家参考，具体内容如下第⼀种效果：数据量不⼤时可采⽤<!doctype html><html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"><script src="vue.min.js" type="text/javascript"></script><title>vue分页</title><style type="text/css">ul{list-style:none;margin:0;}.pagetation_info{width:100%;height:27px;padding:20px 0;}ul.pagetation_box{float:right;height:100%;padding:0 60px;}ul.pagetation_box li{float:left;height:100%;border:1px solid #e6ecef;border-radius: 3px;background-color: #f8f8f8;margin:0 5px;padding:0 10px;color:#263238;cursor: pointer;text-align: center;line-height: 22px;} ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}ul.pagetation_box li.active{background-color: #FF4646;border-color:#FF4646;}ul.pagetation_box li.active a{color:#fff;}ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}ul.pagetation_box li:hover{background-color: #FF4646;border-color:#FF4646;}ul.pagetation_box li:hover a{color:#fff;}.num_total{float:right;height:100%;padding-top:3px;padding-bottom:3px;}.num_total>span{color:#FC5B27;}</style></head><body id="app-body"><div class="pagetation_info clearfix"><ul class="pagetation_box"><li class="firstPage" @click=" page.currentpage = 0 "><a href="javascript:;" >⾸页</a></li><li class="prev" v-show=" page.currentpage > 0 " @click=" page.currentpage-- "><a href="javascript:;" ><</a></li><li v-for="d in page.totalpage" @click=" page.currentpage = $index " :class=" page.currentpage == $index ? 'active' : '' "><a href="javascript:;" >{{$index + 1}}</a></li><li class="next" v-show=" page.currentpage < page.totalpage - 1 " @click=" page.currentpage++ "><a href="javascript:;" >></a></li><li class="lastPage" @click=" page.currentpage = page.totalpage - 1 "><a href="javascript:;" >尾页</a></li></ul><div class="num_total">共 <span>{{page.totalrecord}}</span> 条信息，共 <span>{{page.totalpage}}</span> 页</div></div><script>new Vue({el: "#app-body",data : {"page" : {"totalrecord" : 100,"currentpage" : 0,"pagesize" : 20,"totalpage" : 5,},},watch : {"page.currentpage" : function(val){var _this=this;_this._getList();},},methods : {_getList:function(){}},ready : function(){var _this = this;}});</script></body></html>第⼆种效果：当数据量较⼤时使⽤<!doctype html><html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"><script src="vue.min.js" type="text/javascript"></script><title>vue分页</title><style type="text/css">ul{list-style:none;margin:0;}.pagetation_info{width:100%;height:24px;padding:20px 0;}ul.pagetation_box{float:right;height:100%;padding:0 60px;}ul.pagetation_box li{float:left;height:100%;border:1px solid #e6ecef;background-color: #f8f8f8;margin:0 5px;padding:0 10px;color:#263238;cursor: pointer;text-align: center;line-height: 22px;}ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}ul.pagetation_box li.active{background-color: #FF4646;border-color:#FF4646;}ul.pagetation_box li.active a{color:#fff;}ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}ul.pagetation_box li:hover{background-color: #FF4646;border-color:#FF4646;}ul.pagetation_box li:hover a{color:#fff;}ul.pagetation_box li.more{width:24px;padding:0;background: url(../img/public/page_more.png) no-repeat center center;border:none;}.num_total{float:right;height:100%;line-height:22px;padding-top:3px;padding-bottom:3px;}.num_total>span{color:#FC5B27;}</style></head><body id="app-body"><div class="pagetation_info clearfix"><ul class="pagetation_box"><li class="firstPage" @click="page.currentPage=1"><a href="javascript:;" >⾸页</a></li><li class="prev" v-show="page.currentPage != 1" @click="page.currentPage-- && _gotoPage(page.currentPage)"><a href="javascript:;" ><</a></li><li v-for="index in pages" @click="_gotoPage(index)" :class="{'active':page.currentPage == index}"><a href="javascript:;" >{{index}}</a></li><li class="next" v-show="page.allPages != page.currentPage && page.allPages != 0 " @click="page.currentPage++ && _gotoPage(page.currentPage)"><a href="javascript:;" >></a></li> <li class="lastPage" @click="page.currentPage=page.allPages"><a href="javascript:;" >尾页</a></li></ul><div class="num_total">共 <span>{{page.allRecords}}</span> 条信息，共 <span>{{page.allPages}}</span> 页</div></div><script>new Vue({el : "#app-body",data : {"page":{"currentPage":1,"pagesize":10,"allRecords":100,"allPages":10,"showItem":4,}},watch : {"page.currentpage" : function(val){var _this=this;_this._getList();},},computed:{pages:function(){var _this=this;var p=[];if( _this.page.currentPage < _this.page.showItem ){var i = Math.min(_this.page.showItem,_this.page.allPages);while(i){p.unshift(i--);}}else{var middle = _this.page.currentPage - Math.floor(_this.page.showItem / 2 ),i = _this.page.showItem;console.log(middle,i);if( middle > (_this.page.allPages - _this.page.showItem) ){middle = (_this.page.allPages - _this.page.showItem) + 1}while(i--){p.push( middle++ );}}return p;},},methods : {_gotoPage:function(i){var _this=this;if(i == _this.page.currentPage) return;_this.page.currentPage = i;},},ready : function(){var _this = this;_this.pages;}});</script></body></html>第三种效果：当数据量很⼤时使⽤<!doctype html><html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"><script src="vue.min.js" type="text/javascript"></script><title>vue分页</title><style type="text/css">ul{list-style:none;margin:0;}.pagetation_info{width:100%;height:30px;padding:20px 0;}ul.pagetation_box{float:right;height:100%;padding:0 60px;}ul.pagetation_box li{float:left;height:100%;border:1px solid #e6ecef;background-color: #f8f8f8;margin:0 5px;padding:0 10px;color:#263238;cursor: pointer;text-align: center;line-height: 27px;} ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}ul.pagetation_box li.active{background-color: #03a9f4;border-color:#03a9f4;}ul.pagetation_box li.active a{color:#fff;}ul.pagetation_box li.more{background-color: #fff}ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}ul.pagetation_box li.prevDisabled,ul.pagetation_box li.nextDisabled{width:7px;}ul.pagetation_box li.prevDisabled a,ul.pagetation_box li.nextDisabled a{color:#ccc;}ul.pagetation_box li.prevDisabled:hover, ul.pagetation_box, li.nextDisabled:hover{background-color: #f8f8f8;border-color:#e6ecef;}ul.pagetation_box li.prevDisabled:hover a,ul.pagetation_box li.nextDisabled:hover a{color:#ccc;}ul.pagetation_box li:hover{background-color: #03a9f4;border-color:#03a9f4;}ul.pagetation_box li.more:hover{background-color: #fff;border:none;}ul.pagetation_box li:hover a{color:#fff;}ul.pagetation_box li.more{padding:0;border:none;line-height:22px;}.num_total{float:right;height:100%;line-height:22px;padding-top:3px;padding-bottom:3px;}.num_total>span{color:#FC5B27;}</style></head><body id="app-body"><div class="pagetation_info clearfix"><ul class="pagetation_box"><li class="prev" v-if="page.prevBtn==true" @click="_gotoPage('prev')"><a href="javascript:;" ><</a></li><li class="prevDisabled" v-if="page.prevBtn==false"><a href="javascript:;" ><</a></li><li :class="{active:page.currentPage==index}" v-for="index in page.p1" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li> <li class="more" v-if="page.isShowMore1">...</li><li :class="{active:page.currentPage==index}" v-for="index in page.p2" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li> <li class="more" v-if="page.isShowMore2">...</li><li :class="{active:page.currentPage==index}" v-for="index in page.p3" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li> <li class="next" v-if="page.nextBtn==true" @click="_gotoPage('next')"><a href="javascript:;" >></a></li><li class="nextDisabled" v-if="page.nextBtn==false"><a href="javascript:;" >></a></li></ul><div class="num_total">共 <span>{{page.allItems}}</span> 条信息，共 <span>{{page.allPages}}</span> 页</div></div><script>var App=new Vue({el : "#app-body",data : {"page" : {"currentPage":1,"allPages":10,"allItems":100,"pagesize":10,"showBtn":5,"nextBtn":true,"prevBtn":false,"isShowMore1":false,"isShowMore2":false,"p1":[],"p2":[],"p3":[],},},watch : {"page.currentpage" : function(val){var _this=this;_this._getList();},},computed:{pagination:function(){var _this=this;var i = _this.page.showBtn-2;if(_this.page.currentPage==_this.page.allPages){_this.page.nextBtn=false;}var p1=[],p2=[],p3=[];if( _this.page.allPages < _this.page.showBtn ){_this.page.isShowMore1=false;_this.page.isShowMore2=false;i = _this.page.allPages;while(i){p1.unshift(i--);}}else if(_this.page.allPages > _this.page.showBtn && _this.page.allPages < _this.page.showBtn+1){_this.page.isShowMore1=false;_this.page.isShowMore2=true;if(_this.page.currentPage<3){p1=[1,2,3];p3.push(_this.page.allPages);}else{p1=[1];i=_this.page.showBtn-2;while(i--){p3.unshift( _this.page.allPages-- );}}}else{if(_this.page.currentPage<3){p1=[1,2,3];p3.push(_this.page.allPages);_this.page.isShowMore1=false;_this.page.isShowMore2=true;}else if(_this.page.currentPage>_this.page.allPages-2){_this.page.isShowMore1=true;_this.page.isShowMore2=false;p1=[1];i=3;var allPages = _this.page.allPages;while(i--){p3.unshift( allPages-- );}}else{_this.page.isShowMore1=true;_this.page.isShowMore2=true;if(_this.page.currentPage==3){_this.page.isShowMore1=false;}else if(_this.page.currentPage==_this.page.allPages-1){_this.page.isShowMore2=false;}p1=[1];p3.push(_this.page.allPages);var middle=parseInt((_this.page.showBtn-2)/2);var start=_this.page.currentPage-middle;i = _this.page.showBtn-2;while(i--){p2.push(start++);}}}_this.page.p1=p1;_this.page.p2=p2;_this.page.p3=p3;}},methods : {_gotoPage:function(n){var _this=this;if(n==_this.page.currentPage){return;}if(n==1){_this.page.prevBtn=false;}else{_this.page.prevBtn=true;}if(n==_this.page.allPages){_this.page.nextBtn=false;}else{_this.page.nextBtn=true;}if(typeof n=='number'){_this.page.currentPage=n;}else if(n=='next'){_this.page.currentPage++;}else if(n=='prev'){_this.page.currentPage--;}if(_this.page.currentPage==_this.page.allPages){_this.page.nextBtn=false;}_this.pagination;},},ready : function(){var _this = this;_this.pagination;}});</script></body></html>关于vue.js组件的教程，请⼤家点击专题进⾏学习。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

vue pagination分页参数
摘要：
1.Vue 分页组件概述
2.Vue 分页的参数介绍
3.Vue 分页组件的使用方法
4.Vue 分页组件的自定义选项
5.Vue 分页组件的常见问题及解决方法
正文：
一、Vue 分页组件概述
Vue 分页组件是一个非常实用的数据分页展示组件，它可以将大量数据按照指定的页数进行分页展示，使得用户在浏览数据时能够更加方便、高效。

在Vue 项目中，我们可以使用Vue 分页组件来实现数据的分页展示。

二、Vue 分页的参数介绍
Vue 分页组件提供了丰富的参数配置，以下是一些常用的参数介绍：
1.:total-count：数据总长度，即需要分页的数据总量。

2.:per-page：每页显示的数据长度，可以根据需求进行调整。

3.:current-page：当前页码，默认为1。

4.:page-sizes：每页显示的数据长度选项，可以是一个数组，例如[10, 20, 30, 40]。

5.:page-size：当前每页显示的数据长度，默认值为：totalCount / perPage。

6.:show-prev：是否显示上一页，默认为true。

7.:show-next：是否显示下一页，默认为true。

8.:show-page：是否显示页码，默认为true。

9.:show-total：是否显示总记录数，默认为true。

10.:layout：布局方式，默认为"total, sizes, prev, pager, next, jumper, page".
11.:jumper-align：页码间距方式，默认为"right".
12.:page-align：页码与总记录数对齐方式，默认为"right".
13.:arrow-align：箭头对齐方式，默认为"left".
三、Vue 分页组件的使用方法
在Vue 项目中，我们可以按照以下步骤使用Vue 分页组件：
1.引入Vue 分页组件：`import Pagination from "vue-pagination"`。

2.注册分页组件：`ponent("pagination", Pagination)`。

3.在Vue 模板中使用分页组件：`<pagination :total-
count="totalCount" :per-page="perPage" :current-page="currentPage" @change="onPageChange"></pagination>`。

4.在Vue 实例中定义相关数据和方法：`data() { return { totalCount: 100, perPage: 10, currentPage: 1 }`, methods: { onPageChange(page) { this.currentPage = page } }」。

四、Vue 分页组件的自定义选项
Vue 分页组件提供了丰富的自定义选项，我们可以根据需求进行相关配置，例如：
```html
<pagination
:total-count="100"
:per-page="10"
:current-page="1"
@change="onPageChange"
:page-sizes="[10, 20, 30, 40]"
:page-size="20"
:show-prev="false"
:show-next="false"
:show-page="false"
:show-total="false"
layout="total, sizes, prev, pager, next, jumper, page"
jumper-align="right"
page-align="right"
arrow-align="left"
class="my-pagination"
></pagination>
```
五、Vue 分页组件的常见问题及解决方法
1.问题：分页组件无法正常工作。

解决方法：请检查是否正确引入分页组件，并确保在Vue 实例中定义了相关数据和方法。

2.问题：分页组件样式与页面不匹配。

解决方法：可以尝试为分页组件添加自定义样式，以适应页面的设计风格。

3.问题：分页组件的参数无法正常传递。