当前位置：首页 > news >正文

element-ui分页的使用及修改样式

news 来源：原创 2025/5/10 9:20:12

1.安装

npm install element-ui -S

2.在main.js中引入,这里是全部引入，也可以按需引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.使用

layout="prev, pager, next, jumper" ：jumper直接前往多少页
background：带背景

<div class="page-wrapper"><el-pagination@current-change="handleCurrentChange":current-page.sync="pagination.current":page-size="pagination.size"layout="prev, pager, next, jumper" next-text="下一页"prev-text="上一页"background:total="pagination.total"></el-pagination></div>

js:

data() {return {pagination: {current: 1,total: 300,//接口获取size: 10//每页显示多少条数据}}},methods:{/*翻页*/handleCurrentChange(page) {this.pagination.current = page// this.getData()//获取数据}}

css：修改默认样式

<style  lang="less" scoped>
.page-wrapper {/*不可点击的*//deep/ .el-pagination.is-background .btn-prev:disabled,.page-wrapper .el-pagination.is-background .btn-next:disabled {background-color: #dddddd;color: #f9fafa;border: 0;cursor: not-allowed;}/deep/ .el-pagination button,.page-wrapper .el-pagination span:not([class*=suffix]){min-width: 56px;}/*上下页可点击的样式*//deep/ .el-pagination.is-background .btn-next,.page-wrapper .el-pagination.is-background .btn-prev,.page-wrapper .el-pagination.is-background .el-pager li  {background-color: #fff;color: #333;border: solid 1px #dcdcdc;margin: 0 3px;}/*上下页hover效果*//deep/ .el-pagination.is-background .btn-next:hover,.page-wrapper .el-pagination.is-background .btn-prev:hover {border-color: #e5242b;}/*页码样式*//deep/ .el-pagination {color: #333333;font-weight: normal;}/*当前页样式*//deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {background-color: #e5242b;color: #fff;border:0;}/*当前页hover样式*//deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {color: #fff;border:0;}/*不是当前页其他页码hover样式*//deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {color: #333;border-color: #e5242b;}}
</style>

最后编辑于：2025-04-21 11:14:35