vue+iview tables多个分页实现
- 如果一个页面有多个分页那么可以把每个page和pageSize放到一个对象中,如下:
dataList: {
name: 'dataList', // 方便取到dataList对象
id: null, // 如果需要通过id获取一个列表
fun: 'getDataList', // 获取列表的方法
total: 0,
page: 1,
pageSize: 10
},
- tables中将dataList传递给分页事件,on-change传值时,使用$event作为第二个参数(必须是第二个)
<tables ref="tables" v-model="pdParams" :columns="tableColumns" :total="dataList.total"
:current="dataList.page" :page-size="dataList.pageSize"
@on-change="changePage(dataList, $event)"
@on-page-size-change="changePageSize(dataList, $event)" stripe></tables>
- 分页事件
changePage: function (obj, page) {
this[obj.name].page = page
this[obj.fun](obj.id)
},
changePageSize: function (obj, pageSize) {
this[obj.name].pageSize = pageSize
this[obj.fun](obj.id)
},
- 获取数据列表方法
// 可传入搜索参数
getDataList: function(param){
let vm = this
param = param || {}
$http(vm, 'CFNT0001', 'query', param, (res)=>{
vm.dataList.total = parseInt(res.total)
vm.listParam = res.list || []
}, vm.dataList)
},
// 通过某个id获取参数
getDataList: function(someId){
let vm = this
$http(vm, 'CFNT0001', 'query', {someId}, (res)=>{
vm.dataList.total = parseInt(res.total)
vm.listParam = res.list || []
}, vm.dataList)
},
- 接口把page分页封装进去
export const $http = (vm, tradeCode, action, param, success, pageable, error)=>{
param = param || {}
let baseParam = pageable? { // 如果传递了分页对象就使用该对象的page和pageSize
page: pageable.page,
pageSize: pageable.pageSize
}: {}
// assign将两个对象合并成一个
let extParam = Object.assign(baseParam, param)
vm.$request({
tradeCode: tradeCode,
action: action,
data: extParam,
success: res=>{
success && success(res)
},
error: res=>{
error && error(res)
}
})
}
vue+iview tables多个分页实现的更多相关文章
- vue+iview实现table和分页及与后台数据交互
最近在项目中遇到使用table分页的功能,所以分享出来给大家希望能够对大家有帮助,话不多说直接上代码 <template> <div> <Table :columns=& ...
- JS(vue iview)分页解决方案
JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...
- thinkphp5+vue+iview商城 公众号+小程序更新版本
thinkphp5+vue+iview商城加分销 源码下载地址:http://github.crmeb.net/u/crmeb 演示站后台:http://demo25.crmeb.net 账号:dem ...
- vue & iview
vue & iview ui components https://codepen.io/webgeeker/pen/EJmQxQ https://www.iviewui.com/docs/g ...
- .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片
.NET压缩图片保存 需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...
- Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现
例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...
- 【vue iview】项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了。
[vue iview]项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了.
- vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下
vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...
- vue+iview 通过a标签实现文件下载
vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...
随机推荐
- blaze advisor模型部署工具
python信用评分卡建模(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_ca ...
- Nginx + Naxsi 打造建议WAF
--prefix=/usr/share/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf ...
- AndoridSQLite数据库开发基础教程(6)
AndoridSQLite数据库开发基础教程(6) 为数据库添加添加空表 如果开发者想要往数据库中添加表和列,操作步骤如下: (1)在打开的数据库中,单击左下方的“+”按钮,弹出Table Edito ...
- supervisord守护进程的使用
原文链接:http://blog.csdn.net/xyang81/article/details/51555473 Supervisor(http://supervisord.org/)是用Pyth ...
- Composer 安装 Jira API 库
环境要求: PHP >= 5.5.9 php JsonMapper phpdotenv 安装 下载安装 Composer curl -sS https://getcomposer.org/ins ...
- scipy详解
登月图片消噪 scipy.fftpack模块用来计算快速傅里叶变换速度比传统傅里叶变换更快,是对之前算法的改进图片是二维数据,注意使用fftpack的二维转变方法 import numpy a ...
- Navigator的使用:
1.路由直接跳转到下一个页面: Navigator.pushNamed(context,"/login"); 2.跳转的下一个页面,替换当前的页面: Navigator.of(co ...
- RabbitMQ 入门教程(PHP版) 第二部分:工作队列(Work queues)
工作队列 在第一篇教程中,我们已经写了一个从已知队列中发送和获取消息的程序.在这篇教程中,我们将创建一个工作队列(Work Queue),它会发送一些耗时的任务给多个工作者(Works ). 工作队列 ...
- response.getWriter().write的用法
/** * 获取手机验证码的方法 */ var loopObjBindMobil = null; var secondsBindMobil = 0; function hqBindYzm(moblie ...
- C#中Invoke的用法(转)
invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解. 首先说下,invoke和beg ...