又是被后端欺侮的一天，做了个公司的老我的项目，表格分页后端没法做，那就只能前端来实现。这里我介绍两种办法，须要的自提。
一、实现思路：前端拿到表格的所有数据，而后对数据进行解决，紧接着操作分页。
1、表格数据
<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="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div></template>2、分页定义属性
data() { return { currentPage: 1, //当前页 total: 0, //总条数 list: [], //后盾返回的所有后果 tableData: [], //以后页码的表格数据 pageSize: 10, //当前页容量 pageSizes: [10, 20, 30, 40, 50], }; },3、分页逻辑解决
methods: { //切换每页条数容量 handleSizeChange(val) { this.currentPage = 1; this.pageSize = val; this.getList(); }, //切换当前页 handleCurrentChange(val) { this.currentPage = val; this.getList(); }, //获取表格数据 getList() { 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] //当前页的表格数据 }); }, // 前端解决分页 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; }, },4、初始化调用
created() { this.getList();},二、实现思路：间接在表格中操作
1、表格数据处理
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" > ... </el-table>2、分页表格解决
<div> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination></div>3、分页定义属性
data() { currentPage: 1, //当前页 total: 0, //总条数 tableData: [], //以后页码的表格数据 pageSize: 10, //当前页容量 pageSizes: [10, 20, 30, 40, 50], }4、分页逻辑解决
methods: { //切换每页条数容量 handleSizeChange(val) { this.currentPage = 1; this.pageSize = val; this.getList(); }, //切换当前页 handleCurrentChange(val) { this.currentPage = val; this.getList(); }, //获取表格数据 getList() { getList().then((res) => { this.total = res.data.data.length; //总条数 this.tableData = res.data.data; }); }, }两种办法都可，第二个比较简单。