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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
js实现tab切换效果实例
Sep 16 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
React中使用UEditor百度富文本的方法
Aug 22 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
js实现简易拖拽的示例
Oct 26 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
PHP实现的购物车类实例
2015/06/17 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php中yii框架实例用法
2020/12/22 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
机器学习10大经典算法详解
2017/12/07 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Python解析微信dat文件的方法
2020/11/30 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
医学专业毕业生推荐信
2013/11/14 职场文书
运动会入场词100字
2014/02/06 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
2019年工作总结范文
2019/05/21 职场文书
演讲开头怎么书写?
2019/08/06 职场文书