Laravel+vue+element-ui 实现简单分页

简单记录一下分页操作

• element-ui组件

 <!--分页-->
<el-pagination
 :page-sizes="[10, 20, 30, 40]"
 layout="total, sizes, prev, pager, next, jumper"
 :total="this.total"
 @current-change="list"
 :current-page="currentPage"
 >
</el-pagination>

• js代码

 	data() {
   		return {
      		currentPage:1,
       		//总条数
     		 total:0,
          		}
		},
		methods : {
  			//请求list接口
            list(currentPage) {
            	//url设置接口地址  后面跟上page laravel会自动解析
                let url = "head/headSchool-list?page="+currentPage;
                this.axios.get(url).then(response => {
                    this.currentPage =  response.data.current_page
                    this.tableData = response.data.data;
                    this.total = response.data.total;
                    console.log(this.tableData);
                }).catch(function (error) {
                    console.log(error);
                });
            },
		},
 //默认直接请求list接口
        mounted: function () {
            this.list(this.currentPage);
        }

• 后端代码
  直接返回即可

return School::query()->paginate(13);