HTML:
<Table border stripe ref="selection" :columns="columns" :data="nowData"></Table> <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="_nowPageSize" show-total show-sizer show-elevator/>
表格:
columns:表头数据
data:数据
分页:
total:分页显示多少条数据
page-size:每页显示多少条数据
on-change:改变页码回调,返回值:当前页码
on-page-size-change:切换每页条数时回调,返回值:每页的数据条数
JS:
data(){ return{ columns:['表头'], data:['数据'], //分页 pageSize: 10,//每页显示多少条 dataCount: 0,//总条数 pageCurrent: 1,//当前页 } }
methods:
//所有数据
_getData() { //所有数据 this.data = []; for (let i = 0; i < 100; i++) { let a = { id: i, idName: 'Mr.Li' + i, name: '小李', organization: '国务院', people: '老李', state: '活跃', }; this.data.push(a); } //分页显示所有数据总数 this.dataCount = this.data.length; //循环展示页面刚加载时需要的数据条数 this.nowData = []; for (let i = 0; i < this.pageSize; i++) { this.nowData.push(this.data[i]); } },
//点击,切换页面 changepage(index) { //需要显示开始数据的index,(因为数据是从0开始的,页码是从1开始的,需要-1) let _start = (index - 1) * this.pageSize; //需要显示结束数据的index let _end = index * this.pageSize; //截取需要显示的数据 this.nowData = this.data.slice(_start, _end); //储存当前页 this.pageCurrent = index; },
//每页显示的数据条数 _nowPageSize(index) { //实时获取当前需要显示的条数 this.pageSize = index; },