Two ways to paginate. Front-end pagination, back-end pagination
Front-end pagination: The background only needs to return the data, and there is no need to do too much processing. The front-end pagination process after obtaining all the data at one request. But the amount of data cannot be too large, because the front-end first loads all data at once and then performs pagination processing. When there is a lot of data, the corresponding loading will slow down. When doing paging on the front end, you should first consider the amount of data in the later stage.
Backend paging: Because it is backend paging, the frontend requests data from the backend every time it clicks. In fact, it is to avoid the front-end obtaining a large amount of data from the database at one time.
1. Introduce tables and paging into your own pages in elementUI
<template>
<div class="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="address"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'Wang Xiaohu',
address: 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu',
address: 'Lian 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-01',
name: 'Wang Xiaohu',
address: 'Lian 1519, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu',
address: 'Lan 1516, Jinshajiang Road, Putuo District, Shanghai'
}],
// The first line is displayed by default currentPage:1
}
},
methods: {
handleSizeChange(val) {
(`Each page ${val} strip`);
},
handleCurrentChange(val) {
(`Current page: ${val}`);
}
},
}
</script>
2. Pagination part
- Front-end pagination
<template>
<div class="app">
<!-- Calculate the obtained data -->
<el-table :data="((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
<el-table-column prop="date" label="date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="address"></el-table-column>
</el-table>
<div class="tabListPage">
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data(){
return {
// Total data tableData:[],
// Which page is displayed by default currentPage:1,
// Total number of digits, obtain data length according to the interface (note: it cannot be empty here) totalCount:1,
// Number selector (can be modified) pageSizes:[1,2,3,4],
// The default number of pieces displayed per page (can be modified) PageSize:1,
}
},
methods:{
getData(){
// Use axios here, please introduce it in advance when using it (url,{
orgCode:1
},{emulateJSON: true},
{
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
}
).then(reponse=>{
(reponse)
// Assign data to tableData =
// Assign the length of the data to totalCount =
})
},
// Pagination // Number of pieces displayed per page handleSizeChange(val) {
// Change the number of pieces displayed on each page =val
// Note: When changing the number of lines displayed on each page, display the page number to the first page =1
},
// Show which page handleCurrentChange(val) {
// Change the default page count =val
},
},
created:function(){
()
}
}
</script>
- Backend pagination
<template>
<div class="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="address"></el-table-column>
</el-table>
<div class="tabListPage">
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data(){
return {
// Total data tableData:[],
// Which page is displayed by default currentPage:1,
// Total number of digits, obtain data length according to the interface (note: it cannot be empty here) totalCount:1,
// Number selector (can be modified) pageSizes:[1,2,3,4],
// The default number of pieces displayed per page (can be modified) PageSize:1,
}
},
methods:{
// Pass the page number and the number of pieces displayed on each page to the background as parameters getData(n1,n2){
// Use axios here, please introduce it in advance when using it (url,{
orgCode:1,
// Number of pieces displayed per page PageSize:n1,
// Show which page currentPage:n2,
},{emulateJSON: true},
{
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
}
).then(reponse=>{
(reponse)
// Assign data to tableData =
// Assign the length of the data to totalCount =
})
},
// Pagination // Number of pieces displayed per page handleSizeChange(val) {
// Change the number of pieces displayed on each page =val
// When clicking on the number of entries displayed on each page, the first page will be displayed (val,1)
// Note: When changing the number of lines displayed on each page, display the page number to the first page =1
},
// Show which page handleCurrentChange(val) {
// Change the default page count =val
// When switching page numbers, you need to get the number of pieces displayed on each page (,(val)*())
},
},
created:function(){
(,)
}
}
</script>
This is the end of this article about vue using elementUI components to achieve pagination effects. For more related vue elementUI paging content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!