根据之前写的代码剥离分析得出：
data传入参数：
1 2 3 | page:1, //当前页 limit:10, //每页默认显示条数 total:0, //总条数 |
//函数部分代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | getlist(){ $.ajax({ type:'post', dataType:'json', data:{ page:this.page, limit:this.limit, }, url:"{:U('Retail/auth/bothauth')}", success:function(res){ app.tableData = res.res; //tabledata是vue中的循环数据数组 app.total = res.counts;//总条数 } }); }, //在created里面运行上述函数，首先查询第一页 created(){ this.getlist(); }, |
后台部分代码如下（thinkphp3版本）：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | public function bothauth() { $page = I('param.page'); $limit = I('param.limit'); $info = D('Auth')->both($page,$limit); $counts = M('food_auth')->count(); $arr = array( 'res'=>$info, 'counts'=>(int)($counts), ); $this->ajaxReturn($arr); } |
html部分代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :pager-count="5" :page-sizes="[5,10,20,30]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> /* 切换每页数量 */ handleSizeChange(val) { // console.log(val); this.limit = val; this.page = 1; this.getlist(); }, /* 切换页数 */ handleCurrentChange(val) { // console.log(val); this.page = val; this.getlist(); }, |
至此……