-
先上效果图.(后端接口请求一次,返回所有(1000条为例)数据,前端拿到所有数据处理分页).
-
使用情形: A.正常情况下,前后端分离的项目,对于表格类数据多的情况,都是由前端传当前页的页码和当前页的容量大小给后台,后台拿到这些字段进行分页返回数据(即前端动一页就发送一次请求拿到当前页的数据,这部分应用太过简单,这里不再累述). B.特殊情形下,后台不处理分页,只会在请求的时候一下将所有数据一起返回,这时候就需要前端同学自己处理分页了(本文针对的就是这种情形下的一种处理方式,仅供参考,大佬勿喷).
-
主体思路: 前端发送请求拿到所有数据 → 对该数据进行处理 → 操作分页组件.
-
关键代码:
<template>
<div class="home">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="phone" label="电话" width="180"></el-table-column>
<el-table-column prop="userName" label="用户名"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 30, 50, 100]"
:page-size="20"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import * as API from "@/api/pageRequest/home.js";
export default {
name: "Home",
data() {
return {
currentPage: 1, //当前页
total: null, //总数
list: [], //后台返回的所有结果
tableData: [], //当前页码的表格数据
pageSize: 20, //当前页容量
};
},
methods: {
handleSizeChange(val) { //切换每页条数容量
this.currentPage = 1;
this.pageSize = val;
this.getList();
},
handleCurrentChange(val) { //切换当前页
this.currentPage = val;
this.getList();
},
getList() { //自己封装的axios请求,获取数据
API.getList().then((res) => {
this.list = res.data.data; //总数组
this.total = res.data.data.length; //总条数
this.tableData = this.getNeedArr(this.list,this.pageSize)[this.currentPage - 1] //当前页的表格数据
console.log(this.tableData);
});
},
getNeedArr(array, size) { //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
const length = array.length;
//判断不是数组,或者size没有设置,size小于1,就返回空数组
if (!length || !size || size < 1) {
return [];
}
//核心部分
let index = 0; //用来表示切割元素的范围start
let resIndex = 0; //用来递增表示输出数组的下标
//根据length和size算出输出数组的长度,并且创建它。
let result = new Array(Math.ceil(length / size));
//进行循环
while (index < length) {
//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
result[resIndex++] = array.slice(index, (index += size));
}
//输出新数组
return result;
},
},
created() {
this.getList();
},
};
</script>
- 核心代码(对原数据的数组进行切割成自己想要的小数组):
getNeedArr(array, size) { //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
const length = array.length;
//判断不是数组,或者size没有设置,size小于1,就返回空数组
if (!length || !size || size < 1) {
return [];
}
//核心部分
let index = 0; //用来表示切割元素的范围start
let resIndex = 0; //用来递增表示输出数组的下标
//根据length和size算出输出数组的长度,并且创建它。
let result = new Array(Math.ceil(length / size));
//进行循环
while (index < length) {
//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
result[resIndex++] = array.slice(index, (index += size));
}
//输出新数组
return result;
},
- 结语: 以上就是基于Vue和Elm组件库纯前端处理分页的一种简易办法.当然方法很多,仅供参考.友情链接Elm官网-分页