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.histories
this.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>