vue+element pagination分页的二次封装，带首页末页功能

最近重构一个项目，需要实现带有首页，末页的分页功能，

但是element的pagination并没有这样子，最完整功能如下

网上搜索了好多，发现有slot可以增加自定义项，但是

    <el-paginationbackground@current-change="handleCurrentChange":current-page="currentPageNum":page-size="pageSize"layout="total,slot,prev,pager,next,slot, jumper":total="total":firstPage='firstPage':lastPage='lastPage'><el-button:disabled="currentPageNum === firstPage"class="first-pager"@click="toFirstPage">首页</el-button><el-button:disabled="currentPageNum === lastPage"class="last-pager"@click="toLastPage">末页</el-button></el-pagination>

这样却并不能实现，只能出现一个首页的button，实在是找不到末页的button哪里去了，不知道是不是只能带一个slot

最后无奈只能这样实现了，直接上代码了

<template><div><el-paginationbackground@current-change="handleCurrentChange":current-page="currentPageNum":page-size="pageSize"layout="total,slot,prev":total="total"><el-button :disabled="firstPageBtnDisabled" class="first-pager" @click="toFirstPage">首页</el-button></el-pagination><el-paginationbackground@current-change="handleCurrentChange":current-page="currentPageNum":page-size="pageSize"layout="pager,next,slot,jumper":total="total"><el-button :disabled="lastPageBtnDisabled" class="last-pager" @click="toLastPage">末页</el-button></el-pagination></div>
</template>
<script>
export default {name: "pages",components: {},data() {return {currentPageNum: this.currentPage,firstPageBtnDisabled: true,lastPageBtnDisabled: false,lastPageNum: Math.ceil(this.total / this.pageSize)};},props: {currentPage: {type: Number,default: 1},pageSize: {type: Number,default: 10},total: {type: Number,default: 0}},watch: {total(newVal, oldVal) {this.total = newVal;this.lastPageNum = Math.ceil(newVal / this.pageSize);}},created() {},methods: {handleCurrentChange(val) {this.firstPageBtnDisabled = val === 1 ? true : false;this.lastPageBtnDisabled = val === this.lastPageNum ? true : false;this.currentPageNum = val;this.$emit("handleCurrentChangeSub", val);},toFirstPage(val) {this.handleCurrentChange();},toLastPage(val) {this.currentPageNum = this.lastPageNum;this.handleCurrentChange(this.lastPageNum);}},created() {},mounted() {},destroyed() {}
};
</script>
<style>
.el-pagination {float: left;
}
</style>

全局注册一下组件，在compones文件夹下新建index.js

import Vue from 'vue'import pages from './pages'Vue.component('pages', pages)

最后在main.js中引入就可以了

在组件中使用

        <pages:total='fenye.total':currentPage='fenye.pageNum':pageSize='fenye.pageSize'@handleCurrentChangeSub="handleCurrentChange"></pages>

或有不足之处尚待修改

vue+element pagination分页的二次封装，带首页末页功能相关推荐

vue element Pagination分页组件二次封装
vue+element 的分页组件封装 1.在components中创建GlobalPagination文件夹,代码如下 <template><div :class="{' ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
Spring Boot Vue Element入门实战（五）封装axios
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 (一)关于Axios Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.pos ...
vue+element UI分页的使用方法
这篇仅对于刚入行前端的小伙伴,大佬勿喷,技术比较菜,哪里写的不对也请指正首先第一步当然少不了我们的分页组件 <el-pagination:current-page="page_opt ...
vue中使用qrcode生成二维码并实现打印功能
问题产生背景: 客户要求根据表格中选中的数据产生对应的二维码并可以利用打印机打印出来必要条件:vue.需要安装qrcode和vue-print-nb依赖(具体安装可自行百度) 实现思路: 当用户勾选 ...
【笔记】Vue Element+Node.js开发企业通用管理后台系统——电子书解析功能开发
文章目录一.电子书解析 1.构建函数 2.从文件创建 Book 对象 3.电子书解析 (1)epub 库集成 (2)使用 epub 库解析电子书 (3)epub 库获取图片逻辑修改 (4)电子书目录 ...
Pagination 分页实现跳转首页和尾页
使用slot插槽添加首页和尾页按钮: <div class="paginationCustomize" v-if="tableData.length > 0& ...
对elementui中分页组件进行二次封装
为什么二次封装一般在后台管理项目当中,页面功能涉及到的数据展示的地方会比较多,而其中却少不了表格,分页以及条件检索.如果代码是 copy 来又 copy 去,岂不是很没有技术含量. 而且每个项目的U ...
Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线
先说一下这次对ECharts二次封装总结的一些东西吧,感觉这是重点! 二次封装及使用的矛盾痛点: 一般封装只会暴露出一些常用的属性,最常见的如图表的颜色.数据: 封装人员也不会考虑把所有情况都封装起来 ...

vue+element pagination分页的二次封装，带首页末页功能

vue+element pagination分页的二次封装，带首页末页功能相关推荐

最新文章

热门文章