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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 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将向Java靠拢
2006/10/09 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
微信小程序实现上传图片功能
2018/05/28 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
Python import自定义模块方法
2015/02/12 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python3学生名片管理v2.0版
2018/11/29 Python
Django中FilePathField字段的用法
2020/05/21 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
使用Python构造hive insert语句说明
2020/06/06 Python
python GUI模拟实现计算器
2020/06/22 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
小学生自我评价范例
2013/09/24 职场文书
团员个人的自我评价
2013/12/02 职场文书
负责人任命书范本
2014/06/04 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
2014年终个人总结报告
2015/03/09 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技