Element-UI 分页控件 Pagination 添加 首页，尾页，总页数

1、从element-ui官网复制分页代码到项目中，修改对应的分页参数为项目的真实数据，添加背景为蓝底白字样式。

<el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="page.page"
               :page-sizes="[1, 2, 3, 4]"
               :page-size="page.size"
               layout="total, sizes, prev, pager, next, jumper"
               :total="page.totalCount"
               background
               >     
</el-pagination>
<script>
    export default {
        data(){
            return {
                // 分页
                page: {
                    page: 1,
                    size: 2,
                    totalCount: 20,
                    pageCount: 10,
                },
            }
        }
    }
</script>

生成的界面如下：

2、修改属性，使上一页和下一页由原来的<和>为“上一页”和“下一页”，代码如下

主要是修改属性：prev-text和next-text

<el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="page.page"
               :page-sizes="[1, 2, 3, 4]"
               :page-size="page.size"
               layout="total, sizes, prev, pager, next, jumper"
               :total="page.totalCount"
               prev-text="上一页"
               next-text="下一页"
               background
               >
</el-pagination>

生成的界面如下：

3、添加首页，尾页，总页数，代码如下

操作方法：在layout中添加 slot（插槽），配置对应插槽信息。

注意：一个分页组件只能实现一个插槽功能，layout中slot值要放在合适位置

有3个功能用了3个分页组件，第一个组件实现总条数，第二个实现首页，第三个实现了尾页功能。

<div>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="total,slot, sizes"
                   :total="page.totalCount"
                   prev-text="上一页"
                   next-text="下一页"
                   background
                   >
        <span class="el-pagination__total">，共 {{ page.page }} / {{ page.pageCount }} 页</span>
    </el-pagination>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="slot, prev, pager, next"
                   :total="page.totalCount"
                   prev-text="上一页"
                   next-text="下一页"
                   background
                   >
        <button :disabled="page.page == 1" @click="show(1)" class="btn-prev">
            首页
        </button>
    </el-pagination>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="slot,jumper"
                   :total="page.totalCount"
                   prev-text="上一页"
                   next-text="下一页"
                   background
                   >
        <button
                :disabled="page.page == page.pageCount"
                @click="show(page.pageCount)"
                class="btn-prev"
                >
            尾页
        </button>
    </el-pagination>
</div>

生成的界面如下：

上图的问题是分页组件换行了，可以自行设置样式来解决，也可参考下面的代码

4、添加首页，尾页，总页数，分页组件显示在一行，代码如下

操作方法：在分页组件外层包裹一个div，设置它的样式 style="display: flex"

<div style="display: flex">
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="total,slot, sizes"
                   :total="page.totalCount"
                   prev-text="上一页"
                   next-text="下一页"
                   background
                   >
        <span class="el-pagination__total">，共 {{ page.page }} / {{ page.pageCount }} 页</span>
    </el-pagination>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="slot, prev, pager, next"
                   :total="page.totalCount"
                   prev-text="上一页"
                   next-text="下一页"
                   background
                   >
        <button :disabled="page.page == 1" @click="show(1)" class="btn-prev">
            首页
        </button>
    </el-pagination>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="slot,jumper"
                   :total="page.totalCount"
                   prev-text="上一页"
                   next-text="下一页"
                   background
                   >
        <button
                :disabled="page.page == page.pageCount"
                @click="show(page.pageCount)"
                class="btn-prev"
                >
            尾页
        </button>
    </el-pagination>
</div>

生成的界面如下：