el-pagination分页自定义前往第几页样式(下拉框形式)

业务场景

应客户要求，需要对表格分页时候的样式进行一些修改。
效果图如下

就是修改了el-pagination前往第几页的样式，把官方的输入页数的方式改成了下拉框的形式

实现步骤

1、利用el_pagination的layout属性自定义插入一个下拉框组件

layout="total,prev,slot,next"

利用slot插入el-select下拉框组件

<el-pagination 
	background :current-page.sync="query.pageNum" 
	:page-size="query.pageSize" 
	prev-text="上一页" 
	next-text="下一页"
    layout="total,prev,slot,next" 
    :total="teamList.length" 
    @current-change="handleCurrentChange"
    @size-change="changeSizeHandler" 
    size="small">
    	<el-select v-model="query.pageNum" placeholder="跳至" size="mini" @change="pageChange">
        	<el-option
                v-for="item in pageoptions"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
        </el-select>
</el-pagination>

2、拼接el-select的数据

el-option的数组是从1-总页数之间的整数，当我们点击el-select的值发生改变时候，我们调整当前页数为el-option选中值即可实现跳转到选中的页数了
pageChange方法

pageChange(page){
	this.query.pageNum = page
},

查询总页数并拼接el_select数组数据
计算总页数totalpage

var totalpage = Math.ceil(response.data.teamList.length/this.query.pageSize);

拼接el_select选项数组pageoptions

for(var i=1;i<=totalpage;i++){
	this.pageoptions.push(i);
}

总结

elui的组件封装的很好但是文档很多东西都没写的很清楚，有时间看来要去看下源码了，文档是指望不上了