vue Element-ui（el-table、el-pagination）實現表格分頁

HTML代碼：（重點關注el-table中:data數據的綁定）
el-pagination中：
layout代表組件佈局，子組件名用逗號分隔
屬性： total代表總條目數
事件： current-change用於監聽頁數改變，而內容也發生改變
html

<template>
    <el-main>
    <el-input placeholder="請輸入要搜索的聯繫人" prefix-icon="el-icon-search" v-model="searchFile"></el-input>
      <el-table :data="tableData"  v-loading="loading" border  height="680px" style="width: 100%">
      <el-table-column label="編號" width="100" prop="id">
      </el-table-column>
      <el-table-column  label="姓名"  prop="name"  width="100">
      </el-table-column>
      <el-table-column  label="電話"  prop="phone"  width="180">
      </el-table-column>
      <el-table-column  label="生日"  prop="brithday"  width="80">
      </el-table-column>
      <el-table-column  label="性別"  prop="gender"  width="80">
      </el-table-column>
      <el-table-column  label="年齡"  prop="age"  width="80">
      </el-table-column>
      <el-table-column  label="住址"  prop="address"  width="280">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            size="mini"
            type="danger">聯繫ta
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分頁底部 -->
    <el-pagination
      background      
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,15]"
      :page-size="pagesize"
      layout="total,jumper,prev, pager, next,sizes"
      :total="files_count"
    ></el-pagination>
    </el-main>
</template>

js

<script>
import {
  selectphoneAll
} from "@/api/files";//獲取數據的接口
    export default {
        name: "phoneList",
        data(){
            let tableDataAll = [];
            return{
                tableData:[],
                // 是否加載數據
                loading:true,
                currentPage:1,
                pagesize:10,
                files_count:5,
                fileList:[],
                searchFile:"",
                
            };
        },
         created: function() {
    this.hadleGetFilesListApi();
  },
    methods:{
    //分頁 初始頁currentPage、初始每頁數據數pagesize和數據testpage--->控制每頁幾條
    handleSizeChange:function(size){
        this.pagesize = size;
        this.hadleGetFilesListApi();
        console.log(this.pagesize)
        console.log(this.hadleGetFilesListApi())
    },
    // 控制頁面的切換
    handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
        // console.log(currentPage)
        this.hadleGetFilesListApi();
    },
    //對所有數據進行分頁處理 發送請求
    hadleGetFilesListApi() {
      selectphoneAll(this.currentPage, this.pagesize)
        .then(res => {
          console.log("111"+res);
          this.tableData = res.data.filesInfo;
          console.log("3333"+this.tableData);
          this.files_count = res.data.files_count;
          this.tableDateAll = res.data.filesInfo;
          this.loading = false;
        })
        .catch({});
    }
    }
}
</script>

接口參考（）

export function selectphoneAll(page, size) {
  return request(
    {
      url:"admin/selectphoneAll",
      method:'post',
      params:{page, size}

    }
  )
}

用到的sql語句

//查詢user表總共有多少行數據
select count(*) from user
//分頁	頁數  每頁數據量
select * from user   limit #{start},#{size}