自定义el-pagination分页

项目场景：

提示：这里简述项目相关背景：
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中两个方法）