<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>