1、适合情形
前端分页一般用于数据量较小的情况，一次请求把数据全部从后端请求回来。
2、前端分页例子
前端分页代码示例github.comcd front-end-page 进入front-end-page 文件夹下npm install 安装依赖npm run dev 运行
3、实现关键
使用计算属性对获取的数据进行处理，即computed中frontEndPageChange方法。el-table中的:data绑定frontEndPageChange。
<el-table:data="frontEndPageChange"stripestyle="width: 1000px;margin:30px auto;"height="550"
>
</el-table>computed: { // 计算属性对数据进行处理 frontEndPageChange() {let start = (this.paginationOptions.currentPage - 1) * this.paginationOptions.pageSize;if (start >= this.tableData.length) start = 0;let end = this.paginationOptions.currentPage * this.paginationOptions.pageSize;if (end >= this.tableData.length) end = this.tableData.length;return this.tableData.slice(start, end);
} }4、vue 文件完整代码
<template><div class="hello">{{msg}}<div><el-table:data="frontEndPageChange"stripestyle="width: 1000px;margin:30px auto;"height="550"><el-table-column prop="date" label="日期" width="100"></el-table-column><el-table-column prop="name" label="姓名" width="100"></el-table-column><el-table-column prop="address" label="地址" width="190"></el-table-column><el-table-column label="个人信息" width="180" align="center"><el-table-column prop="age" label="年龄" align="center"></el-table-column><el-table-column prop="height" label="身高" align="center"></el-table-column></el-table-column></el-table></div><div><el-pagination@size-change="handleSizeChange"@current-change="handlePageChange"class="z-pagination":current-page="paginationOptions.currentPage":page-size="paginationOptions.pageSize":page-sizes="paginationOptions.pageSizes"layout="sizes, prev, pager, next, jumper,total":total="tableData.length"></el-pagination></div></div>
</template><script>// 数据来源import { tableData } from "./js/options";export default {name: "frontEndPage",data() {return {msg: "前端分页",paginationOptions: {currentPage: 1, // 当前页pageSize: 10, // 展示页数pageSizes: [10, 20, 30, 40] // 可选择展示页数 数组},tableData};},computed: {// 计算属性对数据进行处理frontEndPageChange() {let start = (this.paginationOptions.currentPage - 1) * this.paginationOptions.pageSize;if (start >= this.tableData.length) start = 0;let end = this.paginationOptions.currentPage * this.paginationOptions.pageSize;if (end >= this.tableData.length) end = this.tableData.length;return this.tableData.slice(start, end);}},methods: {// 改变分页数量handleSizeChange(val) {this.paginationOptions.pageSize = val;},// 改变当前页handlePageChange(val) {this.paginationOptions.currentPage = val;}}};
</script>5、options.js 数据来源文件
/*** 表头配置*/const tableData = [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1510 弄",age: 18,height: "180cm"},{date: "2016-05-04",name: "李小虎",address: "上海市普陀区金沙江路 1511 弄",age: 18,height: "180cm"},{date: "2016-05-01",name: "孙小虎",address: "上海市普陀区金沙江路 1512 弄",age: 18,height: "180cm"},{date: "2016-05-02",name: "朱小虎",address: "上海市普陀区金沙江路 1513 弄",age: 18,height: "180cm"},{date: "2016-05-04",name: "钱小虎",address: "上海市普陀区金沙江路 1514 弄",age: 18,height: "180cm"},{date: "2016-05-01",name: "杜小虎",address: "上海市普陀区金沙江路 1515 弄",age: 18,height: "180cm"},{date: "2016-05-03",name: "赵小虎",address: "上海市普陀区金沙江路 1516 弄",age: 18,height: "180cm"},{date: "2016-05-02",name: "陈小虎",address: "上海市普陀区金沙江路 1510 弄",age: 18,height: "180cm"},{date: "2016-05-04",name: "吴小虎",address: "上海市普陀区金沙江路 1511 弄",age: 18,height: "180cm"},{date: "2016-05-01",name: "徐小虎",address: "上海市普陀区金沙江路 1512 弄",age: 18,height: "180cm"},{date: "2016-05-02",name: "黄小虎",address: "上海市普陀区金沙江路 1513 弄",age: 18,height: "180cm"},{date: "2016-05-04",name: "秦小虎",address: "上海市普陀区金沙江路 1514 弄",age: 18,height: "180cm"}
];
export { tableData };
