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 相关文章推荐
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
javascript事件模型介绍
May 31 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue-ajax小封装实例
Sep 18 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
js实现点击选项置顶动画效果
Aug 25 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中ob_flush函数和flush函数用法分析
2015/03/18 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
ext实现完整的登录代码
2008/08/08 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python统计cpu利用率的方法
2015/06/02 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
python怎么自定义捕获错误
2020/06/29 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
销售工作岗位职责
2013/12/24 职场文书
心理健康日活动总结
2014/05/08 职场文书
保险公司开门红口号
2014/06/21 职场文书
介绍信格式样本
2015/05/05 职场文书
电影建国大业观后感
2015/06/01 职场文书
初中物理教学反思
2016/02/19 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android