vue+iview实现table和分页及与后台数据交互
最近在项目中遇到使用table分页的功能,所以分享出来给大家希望能够对大家有帮助,话不多说直接上代码
<template>
<div>
<Table :columns="historyColumns" :data="historyData"></Table>
<Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage" @on-page-size-change="pages" show-sizer show-elevator show-total></Page>
</div>
</template>
<style scoped>
.paging {
float: left;
margin-top: 10px;
}
</style>
<script>
import Cookies from 'js-cookie'; export default {
data() {
return {
ajaxHistoryData: [],
// 初始化信息总条数
dataCount: 0,
// 每页显示多少条
pageSize: 10,
xia: 0, //下一页或者上一页的第一项索引值
historyColumns: [{
"type": "selection",
"align": "center",
"width": "30",
"className": "border-r"
}, {
"title": "用户名",
"align": "center",
"key": "username"
}, {
"title": "姓名",
"align": "center",
"key": "name"
}, {
"title": "所属组织机构",
"align": "center",
"key": "deptName"
}, {
"title": "状态",
"align": "center",
"key": "status"
}, {
"title": "联系电话",
"align": "center",
"key": "mobile" }, {
'title': '操作',
'align': 'center',
'key': 'action',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'ios-baseball',
size: 16
},
style: {
marginLeft: '20px'
} }) ]) }
}],
historyData: []
}
},
methods: {
// 获取历史记录信息
handleListApproveHistory() {
let sessionId = Cookies.get('status');
let this1 = this;
this.$http({
headers: {
"Authorization": sessionId,
},
method: 'post',
url: this1.GLOBAL.BASE_URL + '/sys/user/list',
params: {
'deptId': '001',
'offset': 0, //第一页第一项的索引
'limit': 10, //每页显示的条数
},
})
.then(function(res) {
debugger
this1.ajaxHistoryData = res.data.data;
this1.dataCount = res.data.total; this1.historyData = this1.ajaxHistoryData;
})
.catch(function(error) {
//
}) },
pages(num) { //修改每页显示条数时调用
debugger
this.pageSize = num;
this.changepage(1);
},
changepage(index) {
//index当前页码
this.xia = (index - 1) * this.pageSize; let sessionId = Cookies.get('status');
let this1 = this;
this.$http({
headers: {
"Authorization": sessionId,
},
method: 'post',
url: this1.GLOBAL.BASE_URL + '/sys/user/list',
params: {
'deptId': '001',
'offset': this1.xia,
'limit': this1.pageSize,
},
})
.then(function(res) {
debugger
this1.historyData = res.data.data;
})
.catch(function(error) {
//
})
}
},
created() {
this.handleListApproveHistory();
}
}
</script>
代码中一些重要的部分都有标记了注释,如果还有不懂得地方大家可以留言
下面是我的公众号,欢迎大家关注,可以一起学习一起进步:
vue+iview实现table和分页及与后台数据交互的更多相关文章
- Vue.js 学习笔记之三:与服务器的数据交互
显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...
- vue+iview tables多个分页实现
如果一个页面有多个分页那么可以把每个page和pageSize放到一个对象中,如下: dataList: { name: 'dataList', // 方便取到dataList对象 id: null, ...
- vue结合element-ui table本地分页
<template> <el-table :data="tableData1.slice((start1-1)*length1,start1*length1)" ...
- Vue数据交互
注意:本地json文件必须放在static目录下面,读取或交互数据前,请先安装vue-resource.点击前往 -->(vue-resource中文文档) 一.Vue读取本地JSON数据 c ...
- 【Vue】IView之table组件化学习(二)
最基本的绑定table是这样的,需要columns和data两个属性. <template> <Card> <h4>表格栗子</h4> <Tabl ...
- JS(vue iview)分页解决方案
JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...
- 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化
之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...
- Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现
例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...
- iview之——table中嵌套input、select等
使用iview在table中嵌入button是比较常见的需求,但是在table中嵌入input或者select你是否考虑过呢?本文用实例介绍input和select在table中的嵌套. 理解tabl ...
随机推荐
- yii js
页面url拼接以及页面跳转 var baseUrl = '<?php echo Yii::$app->request->baseUrl ?>';var url = baseUr ...
- python-获取当前工作路径
1.sys.argv[0] import sys print sys.argv[0]#获得的是当前执行脚本的位置(若在命令行执行的该命令,则为空) 运行结果(在python脚本中执行的结果): F:/ ...
- Luogu 1098 - 字符串的展开 - [字符串操作][模拟]
题目链接:https://www.luogu.org/problemnew/show/P1098 题目描述在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中 ...
- Python+Django 后台view异步接不到参数问题
因为后台需获取前台的多个ID参数(checkbox) //获取checkbox的每个ID并放到数组内var _items = []; var items = document.getElementsB ...
- asp.net mvc 简单实现一个账号只能在一个地方登录
原理: 假设用户在机器A登陆后, 这时用户再次在机器B登陆,会以当前会话的SessionID作为键,用户id作为值,插入dictionary集合中,集合再保存在application(保存在服务器 ...
- java之jdbc使用
简单使用 Statement 通过 Statement 执行 ,其实是拼接 sql 语句的. 先拼接 sql 语句,然后在一起执行. package com.zze.test; import jav ...
- Centos下,Docker部署Yapi接口管理平台(详细得令人发指)
接口测试的工具很多,公司引进了接口管理平台Yapi,自己尝试直接搭建,从安装Nodejs到配置MongoDB数据库,再到安装yapi的时候,遇到浏览器打开本地服务器Ip地址后,没有显示部署内容...没 ...
- 从AST编译解析谈到写babel插件
之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...
- 51nod 1101 换零钱 (完全背包)
N元钱换为零钱,有多少不同的换法?币值包括1 2 5分,1 2 5角,1 2 5 10 20 50 100元. 例如:5分钱换为零钱,有以下4种换法: 1.5个1分 2.1个2分3个1分 3.2个2分 ...
- 利用ueditor保存到mysql数据库时出现乱码
首先反复检查页面的字符编码,发现使用的都是 utf-8,再次检查数据库编码格式也用的是UTF-8.用format函数进行格式化,还是不起作用,最用把出现乱码的字段的数据类型由BLOB改成MEDIUMT ...