vue实现分页组件
时间:2022-06-13
本文章向大家介绍vue实现分页组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
填坑之路继续哈~
首先来张图,有图有真相
不喜就喷哈~
参数
分页需要的字段:当前页(curPage),每页大小(pageSize),总页数(total) 作为一个组件,所以以上这些参数最好是从父组件传递过来,可以如下定义:
...
props:[
"pageSize","curPage","total"
]
...
按钮显示
另外还需要用一些属性控制按钮的是否显示,比如:当前为第一页时不显示上一页和首页按钮,当前为最后一页时不显示下一页和尾页按钮:
...
data () {
return {
...
"showFirstPage":true,
"showLastPage":true,
"showPrevPage":true,
"showNextPage":true,
...
}
}
...
页面可以如下设置:
<a href="javascript:void(0);" v-show="showFirstPage">首页</a>
<a href="javascript:void(0);" v-show="showPrevPage" >上一页</a>
<a href="javascript:void(0);" v-show="showNextPage" >下一页</a>
<a href="javascript:void(0);" v-show="showLastPage" >尾页</a>
跳转页面大小
页面大小不能用pageSize来控制,需要重新绑定一个变量:
...
data () {
return {
...
"rowNum":this.pageSize
}
}
...
页面部分可以这么写:
<select v-model="rowNum">
<option value="10">10</option>
<option selected="selected" value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
显示逻辑:
...
this.showFirstPage = this.curPage> 1
this.showLastPage = this.curPage< this.total
this.showPrevPage = this.curPage> 1
this.showNextPage = this.curPage< this.total
...
页面跳转
但页数太多时,页面跳转就必不可少了,可以使用<input>
标签让用户输入,当然需要验证输入是否准确, 首先需要的属性不能少:
...
data () {
return {
"gotoPage":"",
...
}
}
...
页面代码:
<input type="text" v-model="gotoPage" />
<a href="javascript:void(0);" >跳转</a>
还有,使用前得做判断:
...
if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){
...
}
...
唉,没口水了。。。其实,说了这么多,就一句话:吾写这份代码不易,希汝珍惜对待 ^_^。。。 好了,关门,放代码:
代码在此
template
<template>
<div class="pager">
<a href="javascript:void(0);" v-show="showFirstPage" v-on:click="firstPage" >首页</a>
<a href="javascript:void(0);" v-show="showPrevPage" v-on:click="prevPage" >上一页</a>
<a href="javascript:void(0);" v-show="showNextPage" v-on:click="nextPage" >下一页</a>
<a href="javascript:void(0);" v-show="showLastPage" v-on:click="lastPage" >尾页</a>
<div>
<select v-model="rowNum">
<option value="10">10</option>
<option selected="selected" value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<span>{{curPage}}/{{total}}</span>
<div class="goto">
<input type="text" v-model="gotoPage" />
<a href="javascript:void(0);" v-on:click="gotoNextPage" >跳转</a>
</div>
</div>
</template>
script
<script>
export default {
mounted() {
this.$nextTick(() => { this.initPager() }) //需要延迟初始化
},
name: 'Pager',
data () {
return {
"gotoPage":"",
"showFirstPage":true,
"showLastPage":true,
"showPrevPage":true,
"showNextPage":true,
"rowNum":this.pageSize
}
},
methods:{
nextPage(){//下一页
this.$emit('setPage', this.curPage+ 1 ) //调用父组件方法
},
prevPage(){//上一页
this.$emit('setPage', this.curPage- 1 ) //调用父组件方法
},
gotoNextPage(){//跳转页面
if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){
var pg = parseInt(this.gotoPage)
if(pg > 0 && pg <= this.pageSize){
this.$emit('setPage', pg ) //调用父组件方法
}else{
this.gotoPage = ""
}
}else{
this.gotoPage = ""
}
},
firstPage(){
this.$emit('setPage', 1 ) //调用父组件方法
},
lastPage(){
this.$emit('setPage', this.total ) //调用父组件方法
},
rowNumChanged(){
this.$emit('setRowNum', this.rowNum )
},
initPager(){
this.showFirstPage = this.curPage> 1
this.showLastPage = this.curPage< this.total
this.showPrevPage = this.curPage> 1
this.showNextPage = this.curPage< this.total
this.gotoPage = ""
}
},
props:[
"pageSize","curPage","total"
],
watch:{
'rowNum':'rowNumChanged' //监控rowNum
}
}
</script>
css
<style>
.pager>span,.pager>a,.pager>select,.pager>div{
float: left;
margin-left: 10px;
}
.pager{
width: 600px;
margin: 0 auto;
margin-top: 10px;
height: 48px;
line-height: 48px;
margin-bottom: 40px;
}
.pager input,.pager select{
height:40px;
line-height:40px;
outline:none;
border:1px solid #888;
padding:10px;
box-sizing:border-box;
}
.pager input{
width: 50px;
}
.pager .goto{
margin-left: 20px;
}
.pager a{
color: black;
font-weight: bold;
text-decoration: none;
}
.pager a:hover{
color: green;
}
</style>
好了,以上就是组件的全部代码
那么父组件该如何调用呢?嘿嘿
分页组件的调用
template
<template>
...
<Pager
v-if="!dataChanged"
ref="pager"
:pageSize="pageSize"
:page="curPage"
:total="total"
@setPage="gotoPage"
@setRowNum="changeRowNum" />
...
</template>
其中dataChanged用来刷新组件的,参考:vue强制刷新组件
其中setPage和setRowNum分别对应父组件的方法:gotoPage,changeRowNum,参考:vue2.0父子组件以及非父子组件如何通信
script
import Pager from '@/components/Pager'
...
export default{
...
data(){
return {
curPage:1,//当前页
total:0,//总共页数
pageSize:20,//每页记录数
dataChanged:false
}
},
components:{
"Pager":Pager
}
methods:{
refresh(){//用于刷新组件,需手动调用
this.dataChanged = true
this.$nextTick(() => {
this.dataChanged = false
})
},
gotoPage(page){
...
},
changeRowNum(pageSize){
...
}
}
...
}
好了,真的完了~
- 糟糕了!这次新版微信,要干死所有小游戏了!
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(59)-BLL层重构
- 除了奇奇怪怪的机器人们,2017年人工智能还干了哪些“蠢事”?
- 区块链搬砖的坑及有效鉴别方法
- 英伟达回应禁令:研究人员放心用不更新驱动就没影响
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(88)-Excel导入和导出-主从表结构导出
- WCF中的Binding模型之六(完结篇):从绑定元素认识系统预定义绑定
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用
- 何为正则表达式?要他有何用?
- 向silverlight传递自定义参数
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(87)-MVC Excel导入和导出
- sl从程序集中读取xaml文件
- WCF技术剖析之二十六:如何导出WCF服务的元数据(Metadata)[实现篇]
- WCF技术剖析之二十六:如何导出WCF服务的元数据(Metadata)[扩展篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 本地存储应用案例 ToDoList
- jQuery 插件
- 本周AI热点回顾:RTX3080被黄牛炒上天;百度资本助力AI 制药,已有十几位博士加入;百度联手打造AI沉浸互动展中国首秀
- 线段树
- 乘法表中第k小的数
- 数据可视化 | Pandas vs Plotnine
- laravel里使用chunk的一个坑
- 一个小小的签到功能,到底用 MySQL 还是 Redis ? ?
- 下载丨9月数据库技术通讯:Redo日志丢失,重建遭遇ORA-16433处理
- knative serving 组件分析
- 在 minikube 上部署 knative
- 认识 JS 静态类型检查工具 Flow
- PostgreSQL中如何实现密码复杂度检查?
- JS/TS 对数组中的对象按对象的值进行去重
- JS/TS 对数组中的对象按相同值进行分组