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>
生成的界面如下：
