vue和axios数据展示 分页功能完成

<template>

  <div>

      <h2>党员欠费列表</h2>

     <el-table

    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"

    height="290"

    border

    style="width: 100%">

    <el-table-column

      prop="realName"

      label="姓名"

      width="180">

    </el-table-column>

    <el-table-column

      prop="sex"

      label="性别">

    </el-table-column>

       <el-table-column

      prop="organizationName"

      label="党员发展阶段">

    </el-table-column>

       <el-table-column

      prop="party_rganization"

      label="所在党组织">

    </el-table-column>

       <el-table-column

      prop="money"

      label="欠费总费用">

    </el-table-column>

  </el-table>

     <!-- 分页器 -->

     <!-- :current-page的值表示当前是第几页；

:page-sizes的值表示可以选择一页多少条；

:page-size的值表示当前一页显示几条；

layout的值表示分页需要显示的内容，例如“total” 表示总数、“next” 表示下一页等；

:total的值表示共几页； -->

  <!-- 可以调整显示的页面可以加 -->

 <!-- :pager-count="2" -->

        <div class="block" style="margin-top:15px;">

            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 

            background

            :current-page="currentPage"   

            :page-sizes="[5]" 

            :page-size="pageSize" 

            layout="total, prev, pager, next, jumper" 

            

            :total="tableData.length">

            </el-pagination>

        </div>

  </div>

</template>

<script>

import axios from 'axios';

export default {

   name:"index",

       data() {

      return {

          // 总数据

           tableData:[],

           // 默认显示第几页

           currentPage:1,

           // 总条数，根据接口获取数据长度(注意：这里不能为空)

           totalCount:1,

           // 个数选择器（可修改）

           pageSizes:[5],

           // 默认每页显示的条数（可修改）

           pageSize:5,

      }

    },

    

     mounted() {

    this.listShow();

  },

    methods: {

      //  分页

         // 每页显示的条数

       handleSizeChange(val) {

           // 改变每页显示的条数 

           this.PageSize=val

           // 注意：在改变每页显示的条数时，要将页码显示到第一页

           this.currentPage=1

       },

         // 显示第几页

       handleCurrentChange(val) {

           // 改变默认的页数

           this.currentPage=val

       },

//  交互显示数据

        listShow(){

          axios.get('http://hrdj.vipgz6.91tunnel.com/partyFeePayment/arrears').then((res) => {

             this.tableData = res.data.data;

          })

        }

    },

}

</script>

<style scoped>

 h2 {

   text-align: center;

 }

</style>