vue使用element-ui 实现自定义分页

可以通过插槽实现自定义的分页，layout: ‘total, slot,sizes, prev, pager,’

//page.js
render (h) {
const pageprops =
	props: {
		layout: 'total, slot,sizes, prev, pager,'
		pagesize: this-pagesize, 
		currentPage: this.currentPage, 
		total: 100,
	}
}
return (
	<el-pagination
		class="page-custome"
		{...pageprops} 
		ref-"cusPage" 
		onCurrent-change={(v)=>{this.currentChange(v)}} 
		onSize-change={(v)=>{this.sizeChange (v)}}
		onPrev-click={(v) =>{this.PrevChange (v)}}
		onNext-change={(v)=>{this.NextChange (v)}}
		<template slot="default">
		{this.setslot(h)}
		</template>
	</el-pagination>
  )
}

插槽的部分

methods: {
setslot (h) {
	return(
		<div class="cusPage"›
			<span on-click={this.toBegin}>首页く/span>
			<span on-click={this.toPre}>上一页く/Span>
			<span on-click={this.tovext}>下一页</span>
			<span on-click={this.toEnd}>未页く/span>
			<span>
				第{this.currentPage}/{this.alltotal}页
			</span>
		</div>
	)
 },
 toNext（） {
 	if（this.$refs.cusPage）{
 		this.$refs.cusPage.next()
 	}
 },
  toPre（） {
 	if（this.$refs.cusPage）{
 		this.$refs.cusPage.prev()
 	}
 },
}

实现效果图

里面具体的逻辑可以自己实现下。