Element组件之分页的使用，特别是page-count的坑

首先分页的使用并不难，只要按照官方文档所写即可，但是里面还有有一些需要大家注意的。

话不多说，先上代码

<template>
    <div class="common_small_page">
        <el-pagination
                small
                class="pop_small_page"
                background
                layout="prev, pager, next"
                :currentPage.sync='currentPageNum'
                :pageSize='pageSize
                @current-change="handleCurrentChange"
                @prev-click="handleCurrentChange"
                @next-click="handleCurrentChange"
                :total="total"
                >
        </el-pagination>
    </div>
</template>

你会发现我用了small属性，没错，我这个分页使用的场合就是在局部小页面中所展示的。

这里需要大家主要的是，组件中的属性前面要加：，组件中的方法前要加@

然后是data数据以及获取父组件传来的值。（先说一下，这个分页功能我是封装了，这里是在调用它）

至于所用的方法

handleCurrentChange(val) {
                this.firstPageBtnDisabled = val === 1 ? true : false;
                this.lastPageBtnDisabled = val === this.lastPageNum ? true : false;
                this.currentPageNum = val;
                this.$emit("handleCurrentChangeSub", val);
            }

这里我所得到的效果图为

写完这些后，我就测试看很多条数据的时候是什么样子，结果发现他没有因为页数过多中间页码自动省略号，原来这个需要自己去设置一下。于是加了一个属性page-count，也就是我要讲的一个坑。

在没有加page-count属性的时候，我页码是这样的

在加上page-count后，页面效果是这样的，这里我设置的page-count为3

但是可以发现控制台有报错，报错是： [Vue warn]: Invalid prop: custom validator check failed for prop “pagerCount”.

找了很久的解决方式，最后我的解决方法是，pager-count只能设置5-21的奇数，无法实现只显示两个页码

这样局部的分页就算写好了，正常的页面分页也差不多这样写。你们有好的解决方法可以评论留言，大家一起学习。