项目场景：
提示：这里简述项目相关背景：
vue项目使用el-ui库，由于原本的el-pagination显示字段和样式无法满足其他项目的设计要求，需要进行改动
el-ui官网：
改动后：
解决方案：
1、创建自定义分页组件
selfPagination.vue
<template>
<div class="self-table-pagination">
<el-pagination
background
layout="sizes,prev,pager,next,total,jumper"
:page-sizes="[10, 20, 30, 50, 100]"
:page-size="pageSize"
:current-page="currentPage"
:total="total"
next-text="下一页 >"
prev-text="< 上一页"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
export default{
props:{
total:{
//总页数
type:Number,
default:0
},
pageSize:{
//页面显示条数
type:Number,
default:10
},
currentPage:{
//当前页
type:Number,
default:1
}
},
data(){
return {
pageObj:{
total:0,
pageSize:10,
currentPage:1
}
}
},
watch:{
total(n,o){
this.pageObj.total = n;
this.$nextTick(() => {
var els = document.querySelectorAll(".self-table-pagination").length;
var divJump = document.querySelectorAll(".el-pagination__jump");
var divTotal = docment.querySelectorAll(".el-pagination__total");
divJump[els - 1].childNodes[0].nodeValue = "跳至"；
divTotal[els - 1].innerHTML = "";
divTotal[els - 1].innerHTML = '共<span class="page-total">' + n + '</span>条';
})
},
pageSize(n,o){
this.pageObj.pageSize = n;
},
currentPage(n,o){
this.pageObj.currentPage = n;
}
},
mounted(){
var els = document.querySelectorAll(".self-table-pagination").length;
document.querySelectorAll(".el-pagination__jump")[els-1].childNodes[0].nodeValue = "跳至";
document.querySelectorAll(".el-pagination__total")[els-1].innerHTML = '共<span class="page-total">' + this.total + '</span>条';
},
methods:{
handleSizeChange(val){
this.pageObj.pageSize = val;
this.$emit("changePage",this.pageObj);
},
handleCurrentChange(val){
this.pageObj.currentPage = val;
this.$emit('changePage',this.pageObj);
}
}
}
</script>
<style lang="scss">
.self-table-pagination{
/*“上一页”、“下一页”，非选中页数字样式*/
.btn-prev,.btn-next,.el-pager .number{
background-color:#fff!important;
border: 1px solid #CCD6DF!important;
border-radius: 5px!important;
}
/*选中页数字样式*/
.el-pager .number.active{
background-color:#1E71FF!important;
}
/*按钮间距微调*/
.btn-prev,.btn-next{
padding:0 10px!important;
}
.el-pagination__jump{
margin-left:0!important;
}
.el-pagination__total{
margin:0 9px 0 29px!important;
}
/*“共xx条”中间数字样式*/
.page-total{
color:#F8681A!important;
min-width:30px!important;
}
}
/*“xx条/页”、“跳至xx页”边框和文字样式*/
.el-pagination__sizes,.el-pagination__jump{
.el-input__inner{
color:#333;
border: 1px solid #CCD6DF;
border-radius: 5px!important;
}
/*修改“xx条/页”后下拉箭头图标*/
i::before{
content:'';
position:absolute;
width:20px;
height:20px;
background:url('../assets/pictures/pagination_select.png') center/100% 100% no-repeat;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
}
</style>
2、使用自定义分页组件举例
tablePage.vue
<template>
<div>
...
<self-pagination :total="total" :page-size="pageSize" :current-page="currentPage" @changePage="getCurrentData"></self-pagination>
</div>
</template>
<script>
import SelfPagination from "@/components/SelfPagination";
export default {
components:{
SelfPagination},
data(){
return {
total:0,
pageSize:10,
currentPage:1
}
},
methods:{
getCurrentData(data){
this.total = data.total;
this.pageSize = data.pageSize;
this.currentPage = data.currentPage;
this.getTableData();//从后台接口获取数据的方法，具体内容及传递参数根据实际开发要求编写
},
...
}
}
</script>
踩坑记录：
1、在selfPagination.vue中，原先el-ui分页的“前往x页”要改成“跳至x页”，以及“共xx条”中样式文字的设置，最好在mounted中，预先初始化设置一下，防止接口数据加载前后显示不同。
2、在selfPagination.vue中，点击换页按钮和分页条数按钮需要给pageSize和currentPage重新赋值（例：methods中两个方法）