利用iview里的page组件实现分页功能

iview的经典组件中有一个page组件，可以实现内容的分页功能，但是官方文档中所给的内容较少，没有具体讲如何将内容分页。具体的分页功能参考如下：

https://segmentfault.com/a/1190000010392169

<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="changepagesize"></Page></div>
</template>
<style scoped>.paging{float:right;margin-top:10px;}
</style>
<script>let testData = {"histories": [{"username": "智能审批","shenpistatus": "审批已通过","shenpicomments": "自动审批通过","time": "2017-07-24 18:11"},{"username": "智能审批","shenpistatus": "审批已通过","shenpicomments": "自动审批通过","time": "2017-07-24 18:11"},{"username": "智能审批","shenpistatus": "审批已通过","shenpicomments": "自动审批通过","time": "2017-07-24 10:04"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201","time": "2017-07-24 10:03"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201","time": "2017-07-24 10:02"},{"username": "智能审批","shenpistatus": "审批已通过","shenpicomments": "自动审批通过","time": "2017-07-24 10:02"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-24 10:01"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-24 09:56"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-21 14:23"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000","time": "2017-07-21 14:23"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-21 14:23"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000","time": "2017-07-21 14:23"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000","time": "2017-07-21 14:23"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000","time": "2017-07-21 14:21"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-21 14:21"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-21 14:20"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000","time": "2017-07-21 14:20"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-21 14:14"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-21 14:13"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-21 14:11"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-21 14:10"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000","time": "2017-07-20 18:09"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000","time": "2017-07-20 18:08"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "  收入 > 999 && 支出 < 201 && 所有项目的总净收入 > 5000","time": "2017-07-20 18:08"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-20 18:07"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-20 18:05"},{"username": "智能审批","shenpistatus": "审批已通过","shenpicomments": "wedfqw","time": "2017-07-20 15:50"},{"username": "智能审批","shenpistatus": "审批已通过","shenpicomments": "wedfqw","time": "2017-07-20 15:20"},{"username": "智能审批","shenpistatus": "审批被拒绝","shenpicomments": "自动审批通过","time": "2017-07-19 18:27"}]}export default {data () {return {ajaxHistoryData:[],// 初始化信息总条数dataCount:0,// 每页显示多少条pageSize:10,historyColumns: [{title: '人员',key: 'username'},{title: '操作',key: 'shenpistatus'},{title: '意见',key: 'shenpicomments'},{title: '时间',key: 'time'}],historyData: []}},methods:{// 获取历史记录信息handleListApproveHistory(){// 保存取到的所有数据this.ajaxHistoryData = testData.historiesthis.dataCount = testData.histories.length;// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示if(testData.histories.length < this.pageSize){this.historyData = this.ajaxHistoryData;}else{this.historyData = this.ajaxHistoryData.slice(0,this.pageSize);}},changepage(index){var _start = ( index - 1 ) * this.pageSize;var _end = index * this.pageSize;this.historyData = this.ajaxHistoryData.slice(_start,_end);},changepagesize(pageSize){this.pageSize = pageSize;this.handleListApproveHistory()}},created(){this.handleListApproveHistory();}}
</script>

利用iview里的page组件实现分页功能相关推荐

android阅读器里的 txt 文本处理分页功能的实现:
txt 文本处理分页功能的实现: 网上找了txt文本分页,实现小说阅读器的功能找了很久找不到自己想要的,所以自己实现一个专门处理txt文本分页功能的类.有人建议用randomAccessFile 可 ...
(转)利用Office里面的OWC组件进行画图
本文讲述如何绘制条形图,折线图,柱形图,面积图等常见图形. 效果图: 手把手教程: 原理:OWC是Office Web Compent的缩写,即Microsoft的Office Web组件 ...
vue 2.0 结合iview UI组件使用分页功能
layui分页功能实现、管理员模块
1,layui table模块自带的分页功能实现前提:js中引入table模块并加载,用table.render()渲染表格 1.1设置table.render()中的page字段为true,开启分 ...
iView UI 使用page分页添加跳转按钮-输入页码后点击跳转
使用电梯,快速跳转到某一页在iview里,分页组件的电梯功能输入页码后需要按回车才能跳转这让不知道需要按回车的人摸不着头脑呀,所以呢,动动手写个跳转按钮~ <div class=" ...
iview ui table表格里嵌入其它组件
iview ui table表格里嵌入其他组件的方式 <Tableborder:columns="columnsBox":data="pointList" ...
Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个能够进行实现数据分页显示.数据选择.数据详细信息查看功能的数据库网页.该数据库 ...
asp.net oracle 分页,asp.net教程之利用ASP实现Oracle数据记录的分页显示
一.引言通过浏览器访问数据量大的表时需要进行分页.ASP对数据库记录分页显示可以通过ADO对象集Recordset对象来实现.Recordset具有以下几个用于分页显示的属性: PageSize:每 ...

利用iview里的page组件实现分页功能

利用iview里的page组件实现分页功能相关推荐

最新文章

热门文章