使用el-pagenation的pagerCount报错（含封装组件代码）

报错问题：（虽然页面上的功能能够实现，但是会报红）

如图，下面是我们项目中一个已封装好的分页组件：

<template>
  <div :class="{'hidden':hidden}" class="pagination-container" >
    <span class="num fl">共{{ Number(total) || 0 }}条</span>
    <el-pagination
    class="fr"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :pager-count="pagerCount"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

接收参数：

   props: {
    // 移动端页码按钮的数量端默认值5
    pagerCount: {
      type: Number,
      default: document.body.clientWidth < 992 ? 5 : 7
    },
 
  },

使用计算属性：

  data() {
    return {
    };
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },

样式：

<style scoped>
.pagination-container {
  background: #fff;
  /* padding: 32px 16px; */
}
.pagination-container.hidden {
  display: none;
}
::v-deep .el-pagination.is-background .el-pagination__total {
  display: none;
}
.num{
  line-height: 45px;font-size: 15px;margin-top: -10px;
}
</style>

问题定位：

使用组件时，由于使用了多个table，宽度不够，所以我只想显示3个按钮（问题所在）

        <!-- 分页 -->
 <pagination
          :total="total2"
          :page.sync="queryParams2.pageNum"
          :limit.sync="queryParams2.pageSize"
          @pagination="getInfo(oldsheetNo)"
          :pager-count="3"
        />

使用注意点：

这两个单词差不多，被搞错了

page-count

总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性

pager-count

页码按钮的数量，当总页数超过该值时会折叠

默认情况下，使用pager-count，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过pager-count属性可以设置最大页码按钮数。

并且用的 参数 必须   大于等于 5 且小于等于 21 的 奇数

number

大于等于 5 且小于等于 21 的奇数

完整代码：上方点击下载即可