基于Vue2.x的Element UI的Pagination 分页组件的带首页、尾页功能

最新推荐文章于 2024-01-02 20:12:12 发布

祁铭菲

最新推荐文章于 2024-01-02 20:12:12 发布

阅读量837

点赞数

文章标签： ui vue.js css

本文链接：https://blog.csdn.net/qq_39993715/article/details/122884385

版权

本文主要展示了如何使用CSS实现一个居中显示的前端分页组件。详细解析了`.pageCom`、`.el-pagination`等类的样式设置，包括按钮尺寸、边框、背景色和 hover 效果。同时，提供了分页组件的HTML结构，包括“首页”和“末页”按钮的实现，以及如何根据总页数和当前页码进行翻页操作。

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

展示样式，且基于一行的中间

.pageCom{margin: 10px 0;display: flex;justify-content: center;-webkit-justify-content: center}
.el-pagination {padding:0;}
.el-pagination.is-background .el-pager li:not(.disabled).active{height:30px;line-height:30px;border:#BC1920;background-color: #BC1920;color: #FFF;}
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next{margin:0 10px;height:30px;background:#fff;border:1px solid #F0F2F5;}
.el-pagination.is-background .el-pager li{height:30px;line-height:30px;background:#fff;border:1px solid #F0F2F5;margin: 0;font-weight: 400}
.el-pagination .pageBtn{width:48px;height: 30px;border: 1px solid #F0F2F5;border-radius: 0;background: #fff;color: #606266;}
.el-pagination button:not(.is-disabled):hover, .el-pagination.is-background .el-pager li:not(.active):not(.disabled):hover{color:#BC1920;}
.el-pagination button, .el-pagination span:not([class*=suffix]){height: 30px;line-height: 30px}

<!-- total: 总页数；pageSize：一页展示条数；pageNum：当前页码 -->
<div class="pageCom">
    <div>
        <el-pagination background layout="jumper,slot,prev, pager, next" :page-size="pageSize" :total="total" :pager-count="5" :current-page="pageNum" @current-change="search">
            <el-button class="pageBtn" :disabled="pageNum === 1" @click="search(1)">首页</el-button>
        </el-pagination>
    </div>
    <div>
        <el-pagination layout="slot">
            <el-button class="pageBtn" :disabled="pageNum === Math.ceil(total / pageSize)" @click="search(Math.ceil(total / pageSize))">末页</el-button>
        </el-pagination>
    </div>
</div>