1、適合情形

前端分頁一般用于數(shù)據(jù)量較小的情況，一次請(qǐng)求把數(shù)據(jù)全部從后端請(qǐng)求回來。

2、前端分頁例子

前端分頁代碼示例?github.comcd front-end-page 進(jìn)入front-end-page 文件夾下npm install 安裝依賴npm run dev 運(yùn)行

3、實(shí)現(xiàn)關(guān)鍵

使用計(jì)算屬性對(duì)獲取的數(shù)據(jù)進(jìn)行處理，即computed中frontEndPageChange方法。el-table中的:data綁定frontEndPageChange。

<el-table:data="frontEndPageChange"stripestyle="width: 1000px;margin:30px auto;"height="550" > </el-table>computed: { // 計(jì)算屬性對(duì)數(shù)據(jù)進(jìn)行處理 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="個(gè)人信息" 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>// 數(shù)據(jù)來源import { tableData } from "./js/options";export default {name: "frontEndPage",data() {return {msg: "前端分頁",paginationOptions: {currentPage: 1, // 當(dāng)前頁pageSize: 10, // 展示頁數(shù)pageSizes: [10, 20, 30, 40] // 可選擇展示頁數(shù) 數(shù)組},tableData};},computed: {// 計(jì)算屬性對(duì)數(shù)據(jù)進(jìn)行處理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: {// 改變分頁數(shù)量handleSizeChange(val) {this.paginationOptions.pageSize = val;},// 改變當(dāng)前頁handlePageChange(val) {this.paginationOptions.currentPage = val;}}}; </script>

5、options.js 數(shù)據(jù)來源文件

/*** 表頭配置*/const tableData = [{date: "2016-05-02",name: "王小虎",address: "上海市普陀區(qū)金沙江路 1510 弄",age: 18,height: "180cm"},{date: "2016-05-04",name: "李小虎",address: "上海市普陀區(qū)金沙江路 1511 弄",age: 18,height: "180cm"},{date: "2016-05-01",name: "孫小虎",address: "上海市普陀區(qū)金沙江路 1512 弄",age: 18,height: "180cm"},{date: "2016-05-02",name: "朱小虎",address: "上海市普陀區(qū)金沙江路 1513 弄",age: 18,height: "180cm"},{date: "2016-05-04",name: "錢小虎",address: "上海市普陀區(qū)金沙江路 1514 弄",age: 18,height: "180cm"},{date: "2016-05-01",name: "杜小虎",address: "上海市普陀區(qū)金沙江路 1515 弄",age: 18,height: "180cm"},{date: "2016-05-03",name: "趙小虎",address: "上海市普陀區(qū)金沙江路 1516 弄",age: 18,height: "180cm"},{date: "2016-05-02",name: "陳小虎",address: "上海市普陀區(qū)金沙江路 1510 弄",age: 18,height: "180cm"},{date: "2016-05-04",name: "吳小虎",address: "上海市普陀區(qū)金沙江路 1511 弄",age: 18,height: "180cm"},{date: "2016-05-01",name: "徐小虎",address: "上海市普陀區(qū)金沙江路 1512 弄",age: 18,height: "180cm"},{date: "2016-05-02",name: "黃小虎",address: "上海市普陀區(qū)金沙江路 1513 弄",age: 18,height: "180cm"},{date: "2016-05-04",name: "秦小虎",address: "上海市普陀區(qū)金沙江路 1514 弄",age: 18,height: "180cm"} ]; export { tableData };

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。