vue.js 表格分页ajax 异步加载数据


Posted in Javascript onOctober 18, 2016

Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。

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 = this.cur - mid;
var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);
if (left < 1) {left = 1}
if (right > this.all ) { right = this.all}
while (left <= right){
list.push(left)
left ++
}
return list;
},
showLast: function(){
if(this.cur == this.all){
return false
}
return true
},
showFirst: function(){
if(this.cur == 1){
return false
}
return true
}
}
});

模板:

<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='parentEle'>
...
<pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
</div>

当点击分页链接的时候,会触发

page-to

事件,而我们在html标签中指定了使用父组件

loadList

方法处理事件,我们只要在组件中把当前页码传给父组件即可,父组件负责ajax加载数据,并更新自身的 pageAll 值。

Javascript 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
vue.js表格分页示例
Oct 18 #Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 #Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 #Javascript
微信小程序 教程之WXSS
Oct 18 #Javascript
微信小程序 教程之引用
Oct 18 #Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 #Javascript
微信小程序 教程之事件
Oct 18 #Javascript
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
领导干部廉政承诺书
2014/03/27 职场文书
新年爱情寄语
2014/04/08 职场文书
技术合作协议书范本
2014/04/18 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
工作简历自我评价
2015/03/11 职场文书
上课迟到检讨书
2015/05/06 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Python IO文件管理的具体使用
2022/03/20 Python