vue 表格中有列需要异步加载_vue.js表格分页,ajax异步加载数据
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。
效果:
代码:
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;
}
}
});
模板:
- «
{{ index }}
- »
- 共{{all}}页
HTML:
...
当点击分页链接的时候,通过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.ceil(res.data.total / that.perPage);//计算总页数
}
}
});
},
//初始化
init:function(){
this.loadList(1);
}
}
});
vm.init();
vue 表格中有列需要异步加载_vue.js表格分页,ajax异步加载数据相关推荐
- jquery ajax 异步分页,jquery 分页 Ajax异步
#th> th> nameth> 操作th> tr> thead> tbody> ul> td> tr> tfoot> table&g ...
- php 异步进度条,PHP学习:PHP+Ajax异步带进度条上传文件实例
<PHP学习:PHP+Ajax异步带进度条上传文件实例>要点: 本文介绍了PHP学习:PHP+Ajax异步带进度条上传文件实例,希望对您有用.如果有疑问,可以联系我们. PHP应用前端引入 ...
- 火信根据用户ID自动化加好友Auto.js代码、群成员加好友、自动拉好友进群
首先打开添加好友页面,然后运行Auto.js代码,输入起始ID,下面代码默认循环添加100个!,后面升级优化后的代码,请联系作者.可加Q交流:2905154974 auto.waitFor(); va ...
- php购物车数量加减代码,js实现购物车商品数量加减
本文实例为大家分享了js实现购物车商品数量加减的具体代码,供大家参考,具体内容如下 Html - + CSS .list a { display: block; margin: 30px; paddi ...
- vue 表格中有列需要异步加载_Vue中使用async/await解决异步请求问题
1.async/await场景 用同步的思维来解决异步问题,当前端接口调用需要等到接口返回值以后渲染页面. 2.名词解释 async async的用法,它作为一个关键字放到函数前面,用于表示函数是一个 ...
- ajax php加载列表实例,jQuery+PHP+ajax实现加载更多内容列表
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我 ...
- html如何实现页面懒加载,原生JS如何实现图片懒加载
懒加载简介 什么是图片懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时 ...
- html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 因为要做个网站, ...
- ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤(详细代码)
在前端工作中,经常会用到ajax,其实很多人只知道ajax是异步请求,不知道应该如何用它,它的基本步骤有哪些,ajax请求过程是怎样的?接下来这篇文章就给大家介绍Ajax的请求步骤,以及ajax请求步 ...
最新文章
- Angular 表单验证类库 ngx-validator 1.0 正式发布
- 不用光驱软驱与U盘,看我如何在IBM X3500 M2服务器上用PE安装Win2K3
- python中的排序方法都有哪些_Python中的排序方法sort(),sorted(),argsort()等
- DEKR 解构式人体关键点回归(三):损失函数
- Project Euler
- Infor 成功举办 Infor Next China
- mysql dba 试题_MySQLDBA面试题-上海热璞科技
- 算法之数学--常用数学公式,规律神器OEIS 2021-03-09
- caffe linux 教程,Caffe 深度学习入门教程
- 查找销售模块中装箱单提单主提单当前的编号
- 广东科技学院计算机学院院长,陈强-广东科技学院-计算机学院
- Packetfence 开源网络准入系统
- MAC系统下解决Teamviewer 被误认为商业用途的问题
- 前端如何判断用户是否打开了控制台
- 圆周率π的几种计算方法与分析
- OKR目标与关键结果法
- 新一代视频编码标准:VVC、AVS3
- 软件工程研究领域最顶级的两个期刊
- h5调起手机拍照功能
- APISpace 天气预报查询API
热门文章
- C/C++遍历Windows文件夹下的所有文件
- Tomcat安装配置与基础使用
- linux下tomcat发布网站验证码获取不到
- 随想录(关于ucore)
- 串行异步通信_每天学一点/ 电工:PLC:串行通信
- python 窗口控件变大变小_详解:用Python+AutoIt实现界面工具开发过程
- wordpress连接mysql数据库_安装wordpress连接mysql数据库问题
- 推荐系统算法_CUCS | 推荐系统算法简介Matrix Factorization(矩阵分解)
- 你会采取什么方法改进你的测试用例_自闭症孩子在公共场所哭闹、撒泼打滚,你会采取什么措施?...
- php字长是什么,计算机的字长是指什么