element-ui的分页,添加首页、尾页,跳转按钮

要实现这要一个分页的效果

HTML分页代码

 <div class="user-pagination"><el-button type="button" @click="jumpFirstPage" class="my-btn">首页</el-button><el-pagination ref="pagination"background prev-text="上一页" next-text="下一页"layout="prev, pager, next, slot"@current-change="handleCurrentChange":current-page="currentPage":total="total":page-size="searchForm.pageSize"style="display: inline-block;padding-left: 0px;"></el-pagination><el-button type="button" @click="jumpLastPage" class="my-btn" style="margin: 0px 5px">尾页</el-button></div>

element-ui默认跳转方法

handleCurrentChange(cpage) {this.currentPage= cpage;
},

添加首页、尾页跳转方法直接复制即可用:

jumpFirstPage () {this.$refs.pagination.handleCurrentChange(1);this.$emit('handleCurrentChange', 1);
},
jumpLastPage () {let font = this.$refs.paginationlet cpage = Math.ceil(font.total / font.pageSize);font.handleCurrentChange(cpage);
}

具体的样式问题根据自己的需求进行改写就可以了

element-ui的分页,添加首页、尾页,跳转按钮相关推荐

【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...
SpringBoot设置首页(默认页)跳转
SpringBoot设置首页(默认页)跳转方案1:controller里添加一个"/"的映射路径 @RequestMapping("/") public St ...
java设置首页跳转_SpringBoot设置首页(默认页)跳转功能的实现方案
先给大家介绍下SpringBoot设置首页(默认页)跳转功能最近springboot开发需要设置个默认页面,就相当于我访问http://www.back.order.baidu.com要直接跳转到登 ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
element ui Tag 动态添加标签
1.首先调接口获取到标签列表, // 级联选择器如果选择的不是第三级菜单async getParamsData() {if (this.selectedCateKeys.length !== 3) { ...
element ui +mybatisPlus分页插件实现分页功能
elementui pagination插件当然这里的依赖部分就需要去创库ctrl+v了 <!--分页部分 pagination插件 @current-change="handlep ...
Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）
效果预览实现思路 data中定义 selectedList 数组保存选中的数据在页面初次渲染.翻页.切换每页数据数量等每次重新获取表格数据渲染表格时,都根据 selectedList 勾选表格中已 ...
element ui实现分页时候如何不从1序号开始
举个栗子,加入我们一页table表格是10行,分页到第二页时候我们想从11开始而不是1,这时候我们就可以这样做(如下图片),里面数字10是根据自己分页器:page-sizes="[10]&q ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
element ui走马灯怎么添加_element-ui对话框与走马灯一起用
一.需求分析通过点击一组图片中的某一张图片,显示出当前的图片在对话框中,并可以通过走马灯的方式左右切换出其他图片,图片大小和对话框大小为自适应二.实现步骤 1.布局代码 :src="it ...

element-ui的分页,添加首页、尾页,跳转按钮

element-ui的分页,添加首页、尾页,跳转按钮相关推荐

最新文章

热门文章