携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十天，点击查看活动详情
今天我遇到了一个分页,我以前总是很迷惑,分页到底是怎么实现的,今天可算给我整明白了.
情景一:调后端接口实现分页
结构部分
<div class="doublebtn">
<button class="topYe" @click="beforePage">上一页</button>
<button class="downYe" @click="nextPage">下一页</button>
<span>第{{ currentPage }}页,共{{ totalPage }}页</span>
</div>
数据部分
data() {
return {
currentPage: "", //当前页
totalPage: "", //总页数
pageNum:1 ,
totalCount: "",
};
},
前端请求部分
getChargeRecord(){
let params = {
pageNum: this.pageNum,
cardType:'01',
cardNum:JSON.parse(getKey("cardMessage")).jzkh
};
chargeRecord(params).then(
(res) => {
console.log(res);
this.tableData=res.content.list;
this.totalCount = res.content.total;
this.currentPage = res.content.pageNum;
this.totalPage = res.content.pages;
}
)
},
上一页和下一页事件
//上一页
beforePage() {
this.pageNum -= 1;
if (this.pageNum < 1) {
this.pageNum = 1;
}
this.getChargeRecord();
},
//下一页
nextPage() {
if (this.pageNum * 7 <= this.totalCount) {
this.pageNum += 1;
}
this.getChargeRecord();
},
后端返的结果
情景二 前端自行实现分页
方法一 slice方法
//allData为全部数据，tableData是目前表格绑定的数据
this.tableData = this.allData.slice(
(this.page - 1) * this.size,
this.page * this.size
);
this.total=this.allData.length
下面是详细代码：
方法二：splice方法
<template>
<div>
<el-table :data="tableData" border>
<el-table-column label="序号" type="index" width="50">
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<el-pagination @size-change="sizeChange" @current-change="currentChange"
:current-page="page" :page-size="size" :page-sizes="pageSizes"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
page: 1, //第几页
size: 3, //一页多少条
total: 0, //总条目数
pageSizes: [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
tableData: [], //表格绑定的数据
allData: [
{
date: "2016-05-02",
name: "王小虎1",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎4",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎5",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎6",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎7",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎8",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎9",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎10",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎11",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎12",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎13",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎14",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎15",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎16",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎17",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎18",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎19",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎20",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎21",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎22",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎23",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎24",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎25",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎26",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎27",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎28",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎29",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎30",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎31",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎32",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎33",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎34",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎35",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎36",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎37",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎38",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎39",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎40",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎41",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎42",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎43",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎44",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎45",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎46",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎47",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎48",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎49",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎50",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎51",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎52",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
methods: {
//获取表格数据，自行分页(slice)
getTabelData() {
//allData为全部数据
this.tableData = this.allData.slice(
(this.page - 1) * this.size,
this.page * this.size
);
this.total=this.allData.length
},
//获取表格数据，自行分页（splice）
getTabelData2() {
let data=JSON.parse(JSON.stringify(this.allData))
this.tableData = data.splice(
(this.page - 1) * this.size,
this.size
);
this.total=this.allData.length
},
//page改变时的回调函数，参数为当前页码
currentChange(val) {
console.log("翻页，当前为第几页", val);
this.page = val;
this.getTabelData2();
},
//size改变时回调的函数，参数为当前的size
sizeChange(val) {
console.log("改变每页多少条，当前一页多少条数据", val);
this.size = val;
this.page = 1;
this.getTabelData2();
},
},
created() {
this.getTabelData2();
},
};
</script>
