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>