iView Table 前端分页

<template>
   <Table border :columns="tableColumns1" :data="tableData1"/>
    <Page :total="dataCount" 
          :page-size="pageSize" 
          show-sizer class="paging"
          @on-change="changepage" 
          @on-page-size-change="pagesize"/>
</template>
<script>
   let testData = {
        "histories": [
                      {
                        "username": "实例一",
                      },
                      {
                        "username": "实例二",
                      },
                      {
                        "username": "实例三",
                      },
                      {
                        "username": "实例四",
                      },
                      {
                        "username": "实例5",
                      },
                      {
                        "username": "实例6",
                      },
                      {
                        "username": "实例7",
                      },
                      {
                        "username": "实例8",
                      },
                      {
                        "username": "实例9",
                      }
                  ]
    };
  export default {
    data () {
      return {
                ajaxtableData1:[],
                // 初始化信息总条数
                dataCount:0,
                // 每页显示多少条
                pageSize:5,
                // 当前页码
                page:1,
                // 表格头部信息
                tableColumns1: [
                    {
                      title: '人员',
                      key: 'username'
                    }
                ],
                tableData1: []
        
      }
    },
    methods: {
         // 获取历史记录信息
          handleListApproveHistory(){

                // 保存取到的所有数据
                this.ajaxtableData1 = testData.histories;
                this.dataCount = testData.histories.length;
                // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
                if(testData.histories.length < this.pageSize){
                    this.tableData1 = this.ajaxtableData1;
                }else{
                   this.tableData1 = this.ajaxtableData1.slice(0,this.pageSize);
                }
          },
          changepage(index){
            // 当前页码
                this.page = index;
                let _start = ( index - 1 ) * this.pageSize;
                let _end = index * this.pageSize;
                this.tableData1 = this.ajaxtableData1.slice(_start,_end);
          },
          pagesize(index){
                let _start = ( this.page - 1 ) * index;
                let _end = this.page * index;
                this.tableData1 = this.ajaxtableData1.slice(_start,_end);
          // 当前展示条数
                this.pageSize = index;
          }
    },
    mounted () {
      
    },
    created(){
            this.handleListApproveHistory();
    }
  }
</script>
<style>

</style>

参考转自: https://blog.csdn.net/min_mo/article/details/83060217