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

就是修改了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的组件封装的很好但是文档很多东西都没写的很清楚,有时间看来要去看下源码了,文档是指望不上了
本文介绍了如何根据客户需求修改Element UI的分页组件,将默认的输入页数方式替换为下拉框选择。通过设置`layout`属性和使用`slot`插入`el-select`组件,实现了页面跳转功能。详细步骤包括布局配置、数据绑定和方法实现。同时,文章提到Element UI文档的不足,建议查看源码以获取更多信息。
1374

被折叠的 条评论
为什么被折叠?



