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 };

總結

以上是生活随笔為你收集整理的前端分页_前端分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。