<template>
<div style="width: 1000px; margin: 0 auto;">
<el-table border
:data="tableData"
style="width: 100%">
<el-table-column
prop="Region"
label="地址">
</el-table-column>
<el-table-column
prop="Gasoline92"
label="92"
>
</el-table-column>
<el-table-column
prop="Gasoline95"
label="95"
>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
All:[],
tableData: [],
total:1,
pageSize:5,
currentPage:1
}
},
created(){
axios.get("https://api.oioweb.cn/api/common/GasolinePriceQuery")
.then(res =>{
this.All=res.data.result
this.tableData=res.data.result.slice(1,10)
console.log(this.All);
this.total=this.All.length
})
},
methods:{
handleSizeChange(val){
this.pageSize=val
console.log(`每页 ${val} 条666`);
let begin= (this.currentPage-1)*this.pageSize;
this.tableData=this.All.slice(begin,begin+this.pageSize)
},
handleCurrentChange(val){
this.currentPage=val
// 其实位置
let begin= (this.currentPage-1)*this.pageSize;
this.tableData=this.All.slice(begin,begin+this.pageSize)
console.log( this.tableData)
console.log(`当前 ${val} 页`);
},
}
};
</script>
<style lang="scss" scoped>
</style>
