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-optionv-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的组件封装的很好但是文档很多东西都没写的很清楚，有时间看来要去看下源码了，文档是指望不上了

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

如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框
1.实现的效果 2.实现说明 3.完整代码一.实现的效果: 二.实现说明: 1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框: inp ...
layui下拉框怎么获取自定义值_layui如何得到select下拉框选中的值？
layui如何得到select下拉框选中的值?下面本篇文章介绍一下layui取得select下拉框选中值的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui如何得到se ...
Jquery分页之（上一页，下一页）
Jquery分页之(上一页,下一页) 在工作中我们会经常用到分页功能,除了数据库实现分页查询和调用分页插件,前端也可以实现分页查询,接下来就有我来带着大家实现一个简单的分页效果. 分页就是将将过多的结 ...
（首页上一页下一页尾页 + 下拉框跳转）分页功能
说在前头(本人用的是bootstrap +jQuery 和 struts2 + MVC)不影响分页功能制作一个分页功能: 效果如下: 由上图可知,此功能只适合页数不是特别多的情况下,页数多的时候, ...
微信小程序如何自定义一个可输入筛选的下拉弹出框，也封装成组件。
在开发过程中,经常会遇到下拉框,有些时候内容过多,找起来也不方便,给他增加一个输入框,相当于用户输入某些信息,然后再下拉,符合输入内容的数据将会被展示出来,大大方便了用户操作体验. 话不多说,让我们开 ...
jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示在线预览下载地址实例代码 <!DOCTYPE html> <html lang="en& ...
Easyexcel生成excel并通过自定义注解实现下拉框以及动态下拉框(将数据库中的数据显示在excel下拉框中)
首先需要定义excel实体类 @Data @ColumnWidth(22) @HeadRowHeight(30) public class ExcelProductDTO {//动态下拉框,可以查询数 ...
Android自定义spinner下拉框实现的实现
一:前言本人参考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一个下拉框,发现Android自带的很难实现我的功能,于是去 ...
在Dialog中实现下拉框效果并对下拉框赋自定义的值
一般在Dialog中用下面一个函数,显示下拉列表,本例以f4函数来实现的 CALL FUNCTION 'VRM_SET_VALUES'EXPORTINGID = 'P_LGORT' "对应屏 ...