最近在项目中遇到使用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和分页及与后台数据交互的更多相关文章

  1. Vue.js 学习笔记之三:与服务器的数据交互

    显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...

  2. vue+iview tables多个分页实现

    如果一个页面有多个分页那么可以把每个page和pageSize放到一个对象中,如下: dataList: { name: 'dataList', // 方便取到dataList对象 id: null, ...

  3. vue结合element-ui table本地分页

    <template> <el-table :data="tableData1.slice((start1-1)*length1,start1*length1)" ...

  4. Vue数据交互

    注意:本地json文件必须放在static目录下面,读取或交互数据前,请先安装vue-resource.点击前往  -->(vue-resource中文文档) 一.Vue读取本地JSON数据 c ...

  5. 【Vue】IView之table组件化学习(二)

    最基本的绑定table是这样的,需要columns和data两个属性. <template> <Card> <h4>表格栗子</h4> <Tabl ...

  6. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  7. 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  8. Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现

    例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...

  9. iview之——table中嵌套input、select等

    使用iview在table中嵌入button是比较常见的需求,但是在table中嵌入input或者select你是否考虑过呢?本文用实例介绍input和select在table中的嵌套. 理解tabl ...

随机推荐

  1. 怎么将APE转MP3,APE转MP3的方法

    怎样实现APE转MP3的问题呢?很多时候我们从网上所下载的音乐格式,可能并不是我们所需要的音乐格式.如APE音乐格式,那么当我们下载了自己并不需要的APE音乐格式我们应该如何将其转换为自己需要的MP3 ...

  2. EF Unknown column 'Project1.FamilyMembers_ID' in 'field list'

    产生成的查询语句中有:Project1.FamilyMembers_ID 字段 原因:就是对象主键对象中有一个属性!

  3. JAVA期末考试整理

    Technical problem: 0.read: Scanner input= new Scanner(System.in) random#: x=(int)(Math.random()*10) ...

  4. ADG日志传输方式参数log_archive_dest_n详解

    主库的日志发送是由log_archive_dest_n参数设置(注意:同时还有一个和它相对应的开关参数log_archive_dest_state_n,用于指定该参数是否有效),下面简单介绍下该参数各 ...

  5. 自己用纯C++实现简单的QT中信号与槽机制

    前天在我很久以前的一篇博文 (http://blog.csdn.net/liukang325/article/details/45742675) 中有人回复说看到我的博文很激动,希望我详细介绍一下信号 ...

  6. word文档发布至博客wordpress网站系统

    今天ytkah接到一个需求:将word文档发布到wordpress网站上,因为客户那边习惯用word来编辑文章,想直接将内容导入到wp网站中,其实 Word 已经提供了这样的功能,并且能够保留 Wor ...

  7. 常见web UI 元素操作 及API使用

    1. 链接(Link) // 找到链接元素,这个方法比较直接,即通过超文本链接上的文字信息来定位元素,这种方式一般专门用于定位页面上的超文本链接 WebElement link1 = driver.f ...

  8. ORACLE结构体系篇之表空间详解.md

    表空间详解一.系统表空间SYSTEM 表空间是Oracle 数据库最重要的一个表空间,存放了一些DDL 语言产生的信息以及PL/SQL 包.视图.函数.过程等,称之为数据字典,因此该表空间也具有其特殊 ...

  9. 3.1.1 Spring 简介

    1. 概念 Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架. IoC : Inversion of Control AOP : Aspect Oriented Program ...

  10. 基于usb4java的usb通讯

    下载java API及lib库地址:http://usb4java.org/index.html 1.导入所需要的库: 2.添加配置文件:文件名:javax.usb.properties:内容:jav ...