element ui——Pagination 自定义分页样式

最新推荐文章于 2024-08-09 10:46:42 发布

who_become_gods

最新推荐文章于 2024-08-09 10:46:42 发布

阅读量1w

点赞数 6

本文链接：https://blog.csdn.net/who_become_gods/article/details/111880796

版权

本文介绍了如何在项目中遇到大量数据时，通过自定义Element UI的Pagination组件样式，防止用户直接跳转到最后一页导致后端ELK崩溃。通过设置`layout`属性和使用`slot`进行自定义，实现分页显示逻辑，确保只显示有限的页码范围。文章提供了一种逻辑思维和相应的JavaScript代码实现，展示了如何计算最小和最大页码，并封装了一个名为ThePagination的组件。

摘要由CSDN通过智能技术生成

在这里插入图片描述

我们可以看到，element ui Pagination分页默认样式直接显示 首页 - 中间页 - 末页，但当项目中数据量过大时，用户直接点击最后一页可能会导致后端elk崩溃。项目最后要求不能把最后一页呈现给用户，只能让用户一个一个点过去类似与下图
在这里插入图片描述
想接着用 element ui Pagination分页也想改变分页的显示样式，经过翻查文档看到 Slot

layout=“total, sizes, prev, slot, next” slot代表的插槽显示样式为下图

在这里插入图片描述
slot就是我们自定义分页的地方

类似于  showNumList = [1,6]  //最小分页数 和最大分页数
 <ul class="pageUl">
   <li class="pageLi" @click="handleCurrentChange(item)" v-for="item in showNumList" :key="item" :class="item == page.pageNo ? 'tePageLi' : ''">
   {
   {
   item}}
   </li>
 </ui>

在这里插入图片描述
逻辑思维
var 定义页面最大页码 = 我们定义一个数
var 总页数 = 总数/每个显示的数量
var min = 1 //最小页码
var max = 1 //最大页码
1、如果总页数 小于 定义页面最大页码 则 max = 总页数 其他的逻辑思维都跟他无关了
2、如果总页数 大于 定义页面最大页码 max = 定义页面最大页码 然后在判断当前点击的页码是否大于 定义页面最大页码 / 2 如果大则 max = 定义页面最大页码
如果小
//min
if(当前点击页码 - parseInt( 定义页面最大页码 / 2) > 0){
min = 当前点击页码 - parseInt( 定义页面最大页码 / 2)
}else{
min = 1
}

//max
if(总页数 > 当前点击页码 + parseInt( 定义页面最大页码 / 2)){
max = 当前点击页码 + parseInt( 定义页面最大页码 / 2)
}else{
max = 总页数
}

在这里插入图片描述

下面贴上完整代码

封装的ThePagination

<template>
    <!-- 配置分页的组件 -->
    <section>
        <div class="pagination">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @prev-click="handleCurrentChange"
                @next-click="handleCurrentChange"
                :current-page.sync="page.pageNo"
                :page-size="page.pageSize"
                :page-sizes="[10, 50, 100, 200]"
                :total="page.total"
                layout="total, sizes, prev, slot, next"
                ref="pagination"
            >
                <ul class="pageUl">
                    <li class="pageLi" @click="handleCurrentChange(item)" v-for="item in showNumList" :key="item" :class="item == page.pageNo ? 'tePageLi' : ''">{
   {
   item}}</li>
                </ul>
            </el-pagination>
        </div>
    </section>
</template>