- 首先第一步就是我们利用element来写一个基本的页面分页功能:
<el-col :span="24" class="toolbar pageBar">
<el-pagination
:total="total"
:current-page.sync="currentPage"
:page-size="pageSize"
:page-sizes="[20, 30, 40, 50]"
layout=" prev, pager, next, sizes, total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-col>
接下来就是我们data里面的数据
export default {
name: "Peopledetail",
data() {
return {
//当前页数
currentPage: 1,
// 总条数
total: 0,
//总页数
page: 1,
// 页面条数
pageSize: 20,
};
},
methods: {
//pageSize改变时
handleSizeChange() {
this.getEmployeeList();
},
//条目改变时
handleCurrentChange() {
this.getEmployeeList();
},
}
getEmployeeList() {
this.loading = true;
request({
url: "/authc/get_limit_maintenance",
method: "post",
data: {
page: this.currentPage,
counts: this.pageSize,
queryType: "keyWord",
keyWord: this.findName,
},
}).then((res) => {
if (res.code === 0) {
this.loading = false;
this.total = res.data.result_counts;
this.page = res.data.result_pages;
this.tableData = res.data.result_records;
console.log("lll", this.tableData);
}
});
},
后面是利用后端接口来测试的,后端会返回总的条目数和总的页面数。