个人学习 elementui分页组件使用

pagination.vue
分页组件

<template>
  <div class="block" style="margin-top: 15px">
    <el-pagination
      align="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1,2,3,4,5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
   
  name: "pagination",
  props: {
   
    tableData: {
   
      type: Array,
    },
    currentPage: {
   
      type: Number,
      default: 1,
    },
    total: {
   
      type: Number,
      default: 20,
    },
    pageSize: {
   
      type: Number,
      default: 1,
    },
  },
  data(){
   
      return{
   
        //   currentPages:this.currentPage,
        //   pageSizes:this.pageSize
      }
  },
  methods: {
   
    handleSizeChange(val) {
   
      this.$emit('handleSizeChange',val)
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
   
      this.$emit('handleCurrentChange',val)
    },
  },
//   watch:{
   
//       currentPage(val){
   
//           this.currentPages=val;
//       },
//       pageSize(val){
   
//           this.pageSizes=val
//       }
//   }
};
</script>

<style>
</style>

父组件引用

<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/login' }" :replace="true"
          >返回登录页面</el-breadcrumb-item
        >
        <el-breadcrumb-item><a href="#">人员管理</a></el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main class="bgimage">
      <div>
        <div class="searchbox">
          <el-input
            maxlength="10"
            clearable
            v-model.trim="search"
            size="mini"
            placeholder="输入关键字搜索"
          />
        </div>
        <div class="tableData">
          <el-table
            highlight-current-row
            ref="tableData"
            align="center"
            v-loading="loading"
            :data="
              tables.slice((currentPage - 1) * pageSize, currentPage * pageSize)
            "
            style="width: 100%; height: 100%"
            :row-key="keyval"
            :cell-class-name="tableCellClassName"
            @cell-click="tabClick"
          >
            <el-table-column type="index"> </el-table-column>
            <el-table-column prop="joindate" width="240">
              <template slot="header" slot-scope="scope">
                入职时间
                <!-- <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="visible"
                >
                  <div style="text-align: center; margin-bottom: 20px">
                    选择查询日期期间
                  </div>
                  <div style="text-align: center; margin-bottom: 20px">
                    <el-date-picker
                      v-model="joinindate"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="查询起始日期"
                      end-placeholder="查询结束日期"
                      format="yyyy-MM-dd"