简单记录一下分页操作
- 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);