vue.js表格分页示例
作者:吾爱 时间:2024-05-02 16:40:45
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。
效果:
代码:
1.注册一个组件
js
Vue.component('pagination',{
template:'#paginationTpl',
replace:true,
props:['cur','all','pageNum'],
methods:{
//页码点击事件
btnClick: function(index){
if(index != this.cur){
this.cur = index;
}
}
},
watch:{
"cur" : function(val,oldVal) {
this.$dispatch('page-to', val);
}
},
computed:{
indexes : function(){
var list = [];
//计算左右页码
var mid = parseInt(this.pageNum / 2);//中间值
var left = Math.max(this.cur - mid,1);
var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);
if (right > this.all ) { right = this.all}
while (left <= right){
list.push(left);
left ++;
}
return list;
},
showLast: function(){
return this.cur != this.all;
},
showFirst: function(){
return this.cur != 1;
}
}
});
模板:
<script type="text/template" id="paginationTpl">
<nav v-if="all > 1">
<ul class="pagination">
<li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li>
<li v-for="index in indexes" :class="{ 'active': cur == index}">
<a @click="btnClick(index)" href="javascript:">{{ index }}</a>
</li>
<li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li>
<li><a>共<i>{{all}}</i>页</a></li>
</ul>
</nav>
</script>
HTML:
<div id='item_list'>
...
<pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
</div>
当点击分页链接的时候,通过watch cur,子组件分发 page-to 事件,通过 @page-to="loadList" 标签指定使用父组件 loadList 方法处理事件,父组件接收到page值然后ajax加载数据,根据服务端返回计算并更新自身的 pageAll 值,因为子组件prop通过 :all="pageAll" 动态绑定了父组件的pageAll对象,所以子组件会联动更新。
附上一个简单的表格组件例子:
var vm = new Vue({
el: "#item_list",
data: {
items : [],
//分页参数
pageAll:0, //总页数,根据服务端返回total值计算
perPage:10 //每页数量
},
methods: {
loadList:function(page){
var that = this;
$.ajax({
url : "/getList",
type:"post",
data:{"page":page,"perPage":this.perPage},
dataType:"json",
error:function(){alert('请求列表失败')},
success:function(res){
if (res.status == 1) {
that.items = res.data.list;
that.perPage = res.data.perPage;
that.pageAll = Math.round(res.data.total / that.perPage);//计算总页数
}
}
});
},
//初始化
init:function(){
this.loadList(1);
}
}
});
vm.init();
精彩专题分享:jquery分页功能操作 JavaScript分页功能操作
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
标签:vue.js,表格,分页,组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python相似模块用例
2023-02-05 12:04:09
Python中的取模运算方法
2023-11-10 04:39:56
![](https://img.aspxhome.com/file/2023/1/90321_0s.jpg)
eclipse创建python项目步骤详解
2021-01-15 00:40:47
![](https://img.aspxhome.com/file/2023/4/131594_0s.png)
SQL server 2005中设置自动编号字段的方法
2024-01-12 13:55:47
![](https://img.aspxhome.com/file/2023/6/102066_0s.png)
Python排序搜索基本算法之希尔排序实例分析
2023-03-27 14:06:07
![](https://img.aspxhome.com/file/2023/9/110369_0s.jpg)
XMLHttpRequest Level 2 使用指南
2024-04-18 10:49:50
![](https://img.aspxhome.com/file/2023/3/136483_0s.png)
Python面向对象程序设计之私有属性及私有方法示例
2023-11-21 06:29:04
python爬虫爬取淘宝商品信息
2023-07-04 10:33:24
![](https://img.aspxhome.com/file/2023/9/75239_0s.jpg)
python网络应用开发知识点浅析
2021-07-15 00:09:48
超全面python常见报错以及解决方案梳理必收藏
2022-02-14 16:33:17
python 实现简单的计算器(gui界面)
2022-11-14 14:35:14
![](https://img.aspxhome.com/file/2023/3/87953_0s.png)
BootStrap selectpicker
2024-02-27 02:19:28
![](https://img.aspxhome.com/file/2023/6/56396_0s.jpg)
css网页下拉菜单制作方法(4):定位问题
2007-02-03 11:39:00
详解MySQL 重做日志(redo log)与回滚日志(undo logo)
2024-01-29 13:51:01
在asp中使用存储过程
2008-02-26 12:17:00
mysql 存储过程的问题
2024-01-29 09:05:15
vue.js整合vux中的上拉加载下拉刷新实例教程
2024-04-30 10:30:17
![](https://img.aspxhome.com/file/2023/9/130169_0s.gif)
Python提取PDF内容的方法(文本、图像、线条等)
2023-07-03 13:16:59
使用字符串建立查询能加快服务器的解析速度吗?
2010-07-14 21:03:00
zabbix监控MySQL主从状态的方法详解
2024-01-22 00:29:24
![](https://img.aspxhome.com/file/2023/4/93894_0s.png)