表格：
<template>
<div id="my_charge">
//表格
<el-table :data="tableData" stripe style="width:100%">
<el-table-column prop ='index' label="序號" min-width="209"></el-table-column>
<el-table-column prop = 'pro_name' label="套餐" min-width="209"></el-table-column>
<el-table-column prop ='order_id' label="訂單號" min-width="209"></el-table-column>
<el-table-column prop = 'pay_time' label="支付時間" min-width="209"></el-table-column>
<el-table-column prop ='pay_price' label="付款金額" min-width="209"></el-table-column>
<el-table-column prop = 'remark' label="訂單備注" min-width="209"></el-table-column>
</el-table>
//分頁
<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>
</tamplate>
<script>
var currentVal = null;
export default {
data(){
return {
tableData: [],//table數據
currentPage: 1,//默認顯示第幾頁
totalCount: 0,//根據接口獲取數據的頁數
pageSizes: [5,10,15,20],//選擇每頁展示的數據條數
pageSize: 10,//默認每頁顯示的數據條數
}
},
methods: {
//分頁
//每頁顯示的條數
handleSizeChange(val){
this.pageSize = val;
this.getOrderHisData(this.currentPage,(this.currentPage-1)*this.pageSize,this.pageSize);
//每次改變一頁顯示的數據條數時頁面跳轉到第一頁
this.currentPage = 1;
},
handleCurrentChange(val){
//改變當前頁碼
this.currentPage = val;
this.getOrderHisData(this.currentPage-1,(this.currentPage-1)*this.pageSize,this.pageSize)
},
//渲染數據表格(分頁在這里傳給后台的是當前起始數據的條數，以及每頁的數據條數)
getOrderHisData(nowPage,start,size) {//當前頁碼nowPage默認為0,起始數據條數start默認為0,每一頁的數據條數size默認為10
var nowPage = nowPage || 0;
var start = start || 0; //start = (nowPage-1)*10
var size = size || 10;
axios.post(url,{
token: token,//用戶token
start: start,
size: size
}).then(res=>{
var datas = res.data.data;//這里是對象數組形式（[{},{}...]）
datas.forEach((item,index)=>{//生成訂單序號
item.index = (currentVal.currentPage-1)*currentVal.pageSize + index +1;
})
//在then里面獲取不到this，就定義了一個currentVal在created階段保存this,有啥好的解決方法歡迎留言
//在then里面獲取不到this，就定義了一個currentVal在created階段保存this,有啥好的解決方法歡迎留言
currentVal.tableData = datas; //將返回數據賦值給tableData
currentVal.totalCount = + res.data.data.size;//totalCount其類型為number類型，這里等同於Number(currentVal.totalCount )
}).catch(err=>{
console.log(err);
})
}，
created(){
currentVal = this;//將this賦給變量在then()回調中使用
this.getOrderHisData()；//表格第一頁數據
}
}
}
}
</script>