iview 表格分页组件的实例

            关于vue的iview  page分页组件和table表单。主要是对on-change和on-page-size-change的方法的总结实例。

第一：引入iview  (此步自行处理)

第二：html页面

 

<Table border :columns="historyColumns" :data="historyData"></Table> <Page :total="dataCount" :page-size="pageSize" show-sizer class="paging" @on-change="changepage" @on-page-size-change="pagesize"></Page>

第三：json数据 （模拟的json数据可以暂时放在<script>里，直接取值）

let testData = { "datalists": [ { "username": "实例一", }, { "username": "实例二", }, { "username": "实例三", }, { "username": "实例四", } ] };

第四：data数据

ajaxHistoryData:[], // 初始化信息总条数 dataCount:0, // 每页显示多少条 pageSize:10, // 当前页码 page:1, // 表格头部信息 historyColumns: [ { title: '人员', key: 'username' } ], historyData: []

第五：数据的处理

// 获取历史记录信息 handleListApproveHistory(){ // 保存取到的所有数据 this.ajaxHistoryData = testData.datalists; this.dataCount = testData.datalists.length; // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示 if(testData.histories.length < this.pageSize){ this.historyData = this.ajaxHistoryData; }else{ this.historyData = this.ajaxHistoryData.slice(0,this.pageSize); } }, changepage(index){ // 当前页码 this.page = index; let _start = ( index - 1 ) * this.pageSize; let _end = index * this.pageSize; this.historyData = this.ajaxHistoryData.slice(_start,_end); }, pagesize(index){ let _start = ( this.page - 1 ) * index; let _end = this.page * index; this.historyData = this.ajaxHistoryData.slice(_start,_end); // 当前展示条数 this.pageSize = index; },

第六：初始化时调用handleListApproveHistory方法。

created(){ this.handleListApproveHistory(); }

 

效果图：