element UI 数据表和分页搭配使用 汽油价格查询
<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>