For the paging effect realized in the page, either the backend provides an interface, and the interface is called every time the next page is clicked. If the interface is not provided, the front end has to intercept the page by itself.
Method 1: slice method
slice(parameter 1, parameter 2) method is to return a new array object, open left and close right
Parameter 1: start subscript number
Parameter 2: end subscript number (not counted)
such as data: [1,2,3,4,5,6,7,8], then data.slice(0,3) is the subscript 0, 1, 2, excluding the number with the subscript 3, that is [1 ,2,3], which can be regarded as [0,3) in mathematics
The slice method is explained in detail
This principle is very similar to the principle of paging. Paging also divides a very long array into several short arrays according to the number of items (size) per page.
//allData is all data, tableData is the data bound to the current form
(this.page - 1) * this.size,
this.page * this.size
);
this.total=this.allData.length
The following is the detailed code:
For example: data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
total number of entries total= 20,
if set size=3 (3 items per page)
Method 2: splice method
The splice method can be understood as deletion, which is only one letter p away from the slice of method 1. To
use splice to page, there are 2 parameters that need to be used,
splice (parameter 1, parameter 2)
parameter 1: from the number Start
Parameter 2: Delete several elements
such as data:[1,2,3,4,5,6,7,8], then data.splice(0,3) starts from the 0th position and deletes 3 elements, That is, the deleted elements are [1,2,3], and the remaining elements are data:[4,5,6,7,8]. This method will change the original array
The splice method is explained in detail
This principle should be combined with the principle of paging. If there are 3 pieces of data on a page, the first page starts from 0, and the 3 elements to be deleted are splice(0,3), and the second page starts from the 3rd. The deleted 3 elements, namely splice(3,3),
so the key statement to paginate with splice is:
let data=JSON.parse(JSON.stringify(this.allData))
this.tableData = data.splice(
(this.page - 1) * this.size,
this.size
);
this.total=this.allData.length
Note: splice will change the original array, because it is used once, which means that some elements of the original array are deleted. You must use deep copy to copy allData first, and then assign the deleted elements to tableData.
The rest of the code remains the same, only a slight change in the method of processing the complete data
For example:
data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
due to deep copy , data can be equal to the complete allData,
the total number of entries total=20,
if set size=3 (3 entries per page)
Summary of the two methods
The final complete code is as follows:
<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>