elementUI實現分頁 分頁的兩種方式。前端分頁，后端分頁
分頁的兩種方式。前端分頁，后端分頁
- 前端分頁：后台只需將數據返回，不需要做過多處理，前端一次請求拿到所有數據后做分頁處理。但數據量不能太大，因為前端是先一次性加載所有數據，然后在做分頁處理。在數據量多的情況下，加載相對應的會變慢。所有在前端做分頁時要先考慮一下后期的數據量。
- 后端分頁：因為是后端分頁，前端在每點擊一次分頁時，便向后台請求一次數據。其實就是避免前端一次性從數據庫獲取大量數據
一、在elementUI中將表格、分頁引入自己的頁面中
<template>
<div class="app">
<el-table :data="tableData" style="width: 100%">
<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="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: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}],
// 默認顯示第一條
currentPage:1
}
},
methods: {
handleSizeChange(val) {
console.log(`每頁 ${val} 條`);
},
handleCurrentChange(val) {
console.log(`當前頁: ${val}`);
}
},
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
二、分頁部分
- 前端分頁
<template>
<div class="app">
<!-- 將獲取到的數據進行計算 -->
<el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
<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>
<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 {
// 總數據
tableData:[],
// 默認顯示第幾頁
currentPage:1,
// 總條數，根據接口獲取數據長度(注意：這里不能為空)
totalCount:1,
// 個數選擇器（可修改）
pageSizes:[1,2,3,4],
// 默認每頁顯示的條數（可修改）
PageSize:1,
}
},
methods:{
getData(){
// 這里使用axios，使用時請提前引入
axios.post(url,{
orgCode:1
},{emulateJSON: true},
{
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
}
).then(reponse=>{
console.log(reponse)
// 將數據賦值給tableData
this.tableData=data.data.body
// 將數據的長度賦值給totalCount
this.totalCount=data.data.body.length
})
},
// 分頁
// 每頁顯示的條數
handleSizeChange(val) {
// 改變每頁顯示的條數
this.PageSize=val
// 注意：在改變每頁顯示的條數時，要將頁碼顯示到第一頁
this.currentPage=1
},
// 顯示第幾頁
handleCurrentChange(val) {
// 改變默認的頁數
this.currentPage=val
},
},
created:function(){
this.getData()
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 后端分頁
<template>
<div class="app">
<el-table :data="tableData" style="width: 100%">
<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>
<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 {
// 總數據
tableData:[],
// 默認顯示第幾頁
currentPage:1,
// 總條數，根據接口獲取數據長度(注意：這里不能為空)
totalCount:1,
// 個數選擇器（可修改）
pageSizes:[1,2,3,4],
// 默認每頁顯示的條數（可修改）
PageSize:1,
}
},
methods:{
// 將頁碼，及每頁顯示的條數以參數傳遞提交給后台
getData(n1,n2){
// 這里使用axios，使用時請提前引入
axios.post(url,{
orgCode:1,
// 每頁顯示的條數
PageSize:n1,
// 顯示第幾頁
currentPage:n2,
},{emulateJSON: true},
{
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
}
).then(reponse=>{
console.log(reponse)
// 將數據賦值給tableData
this.tableData=data.data.body
// 將數據的長度賦值給totalCount
this.totalCount=data.data.body.length
})
},
// 分頁
// 每頁顯示的條數
handleSizeChange(val) {
// 改變每頁顯示的條數
this.PageSize=val
// 點擊每頁顯示的條數時，顯示第一頁
this.getData(val,1)
// 注意：在改變每頁顯示的條數時，要將頁碼顯示到第一頁
this.currentPage=1
},
// 顯示第幾頁
handleCurrentChange(val) {
// 改變默認的頁數
this.currentPage=val
// 切換頁碼時，要獲取每頁顯示的條數
this.getData(this.PageSize,(val)*(this.pageSize))
},
},
created:function(){
this.getData(this.PageSize,this.currentPage)
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79