分页器 - 1556461835/note GitHub Wiki

tp5.0 分页器

在tp5中会有原有的封装好的分页器，但是在element框架一起使用的时候，我们会引用element中分页组件，刺客我们就需要将二者结合在一起，做一个分页组件 在项目中根据需求

1. 前台给后台传值limit（条数），page（当前页码）
2. 后台只返回总页数（pages）

前台vue代码

//vue组件
<el-pagination background layout="prev, pager, next"
			 :page-count="pages"
			 :page-size="limit"
			 :current-page.sync="page"
			 @current-change="pagechange"
			 >
		</el-pagination>

//逻辑代码
pagechange(){
				var cat_id = this.cascCat[this.cascCat.length - 1];
				api.goods.getgoods({
					page:this.page,   //当前页码
					limit:this.limit,  //每页条数
					is_up:this.is_up,
					cat_id,
					search:this.search
				}).then(res => {
					//总页数
					this.pages = res.data.pages;
				})
			},    

后台php代码

public function index(Request $request)
   {
       /**
        * page  //当前页
        * limit  //每页条数
        */
       //条数
       $request = Request::instance();
       $limit = $request->param('limit')?$request->param('limit'):Config::get('paginate')['list_rows'];
       //当前页数
       $page = $request->param('page')?$request->param('page'):1;
       //总页数
       $pages =ceil(Goodsmodel::where($team)->count()/$limit);
       //分页
       $data = Goodsmodel::page($page,$limit)->select();
       return json([
           'code'=>200,
           'msg'=>'成功',
           'data'=>$data,
           'pages'=>$pages,  //总页数
       ]);
   }