分页请求原理:
很多情况,前端请求回来的数据是一个数组,这个数组数据量可以达到上万条,这样数据量过大,会导致前端卡顿,影响用户体验。
所以就需要分页,后端从数据库查数据时通过 如下语句
select * from article limit startNumber,pageSize
后端需要计算从哪个索引开始,公式为
startNumber = (页码-1)*pageSize
前端分页还是后端分页?
答:当然是后端做分页
没有后端很难模拟分页请求,思路其实很简单,每次查询的数据直接for循环渲染就可以了。
注意需要后端的数据包含如下
1. total:数据总条数,用来给前端分页器赋值
2. data: 数组是表格需要的数据
前端需要确定的数据
1. pageSize:页码大小,就是一次性请求多少数据,它用来规定 分页器 显示条数
2. currentPage: 当前为第几页,发请求时用来确定请求的是第几页
<template>
<div>
<!-- 表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column label="id" width="100">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="100">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="年龄" width="100">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.age }}</span>
</template>
</el-table-column>
</el-table>
<!-- 分页器 -->
<el-pagination
:page-size="pageSize"
background
layout="prev, pager, next"
:total="total"
@current-change="handlePageChange"
@prev-click="handlePageChange"
@next-click="handlePageChange"
/>
</div>
</template>
<script>
export default {
data() {
return {
//表格请求的数据
tableData: [
{
id: 1,
name: "滕滕",
age: 24,
},
{
id: 2,
name: "滕滕",
age: 24,
},
{
id: 3,
name: "滕滕",
age: 24,
},
{
id: 4,
name: "滕滕",
age: 24,
},
],
pageSize: 3, //一次渲染数据量
total: 7, //数据总条数
};
},
methods: {
//请求数据
getDataList() {
},
//处理:点击页码、上一页、下一页按钮事件
handlePageChange(pageNumber) {
this.currentPage = pageNumber;
this.$nextTick(() => {
//调用请求数据
this.getDataList();
});
},
},
};
</script>