element 後臺分頁

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