基于vue的element-ui中无总页数的分页封装

借鉴于https://blog.csdn.net/NirvanaRebirth/article/details/92412794，感谢！

上面介绍的很详细，同时在此基础上进行了样式上的调整，样式写的比较杂，仅供参考

效果图（需求是由于数据比较多，不全部展示分页码）

组件代码如下：

<template><div style="margin: 10px"><ul class="listOption" style="float: right"><span class="ivu-page-total span-style" v-if="totalResults !== undefined">共 {{ totalResults }} 条</span><liv-if="totalResults >= rows"title="上一页"class="ivu-page-prev":class="{ 'a-disable': current == 1 }"@click="setPage(current - 1)"><a class="a-size"><i class="el-icon-arrow-left ivu-icon-ios-arrow-left"></i></a></li><liv-for="( item, index ) in pageList"v-bind:key="index":title="item"class="ivu-page-item my-page-item":class="{ 'ivu-page-item-active': item == current }"@click="setPage(item)"><a class="a-size">{{ item }}</a></li><liv-if="totalResults >= rows"title="下一页"class="ivu-page-next":class="{ 'a-disable': nextPages <= 0 }"@click="setPage(current + 1)"><a class="a-size"><i class="el-icon-arrow-right ivu-icon-ios-arrow-right"></i></a></li><div class="ivu-page-options select-style"><el-selectv-model="rows"style="width: 100px; margin-right: 10px"size="mini"@change="changeSize"><el-optionv-for="item in pageSize":value="item.value":label="item.label":key="item.value"></el-option></el-select></div></ul></div>
</template>
<script>
export default {props: ["flag", "advance", "nextPages", "pageSizes", "totalResults"],data() {return {current: 1, //当前页码pageClicked: 1, //点击页码rows: 10, // 当前分页每页展示条数sizeList: [10, 20, 30, 40],};},computed: {pageList() {let list = [];let current = this.current,next = this.nextPages; // current 当前页码，next 后续页码let length, head;if (current > this.advance / 2) {head = current - Math.floor(this.advance / 2);if (next >= Math.floor(this.advance / 2)) {length = this.advance;} else {length = next + Math.floor(this.advance / 2) + 1;}} else {head = 1;if (next + current >= this.advance) {length = this.advance;} else {length = next + current;}}for (let i = 1; i <= length; i++) {list.push(head++);}console.log("pageList", list)return list;},pageSize() {let list = [];let sizes = this.pageSizes != null ? this.pageSizes : this.sizeList;this.rows = sizes[0];for (let i = 0; i < sizes.length; i++) {let option = new Object();option.value = sizes[i];option.label = sizes[i] + " 条/页";list.push(option);}return list;},currentChange() {return {current: this.pageClicked,sizeCurrent: this.rows,};},flagChange() {return this.flag;},},watch: {currentChange(res) {console.log(res);this.$emit("current-change", res.current);},flagChange(res) {this.pageClicked = 1;},},methods: {setPage(id) {//if (this.pageList.indexOf(id) > -1) {this.pageClicked = id;this.current = idconsole.log(this.current);}},changeSize(value) {console.log(value);this.pageClicked = 1;this.$emit("size-change", value)},setCurrent(value) {this.current = value;},},
};
</script>
<style lang="less" scoped>
li {list-style: none;cursor: pointer;
}
.listOption > li {float: left;}
.ivu-page-total {margin-right: 30px;
}
.ivu-page-total,
.ivu-page-options {float: left;font-size: 13px;
}
.ivu-page-options {margin-top: -4px;
}
.my_page_item {margin: 0 2px !important;
}
.a-size {font-size: 13px !important;
}
.ivu-page-item {a {border: 1px solid #ccc;border-left: none;display: block;color: #48576a;width: 32px;height: 28px;line-height: 28px;padding: 0 8px;}background-color: #fff;
}
.ivu-page-item-active {background-color: #20a0ff;a {color: #fff;}
}
.el-icon-arrow-left,
.el-icon-arrow-right {display: block;width: 28px;height: 28px;line-height: 28px;border: 1px solid #ccc;padding-left: 6px;
}
.span-style {margin-top: 4px;
}
.select-style {margin-top: -1px;margin-left: 3px;height: 28px;line-height: 28px;
}
.a-disable {cursor: not-allowed
}</style>

父组件代码及传值

<Pagenation@size-change="handleSizeChange"@current-change="handleCurrentChange":flag="flag":advance="advance":nextPages="nextPages":pageSizes="pageSizes":totalResults="totalResults"/>data中数据，亲测advance与nextPages相等且为奇数更为美观flag: true,advance: 11, // 分页组件可显示的最多页码数nextPages: 11, // 当前页前后包含的页数totalResults: 1000, // 总数pageSizes: [10, 20, 50, 100, 200], // 每页展示条数

下图为nextPages为10，nextPages-1 / 2 即为当前页左右两边的数目

最后一段代码关于下拉框的样式加到合适的地方去能生效就行

.el-input--mini .el-input__inner {height: 30px !important;font-size: 13px;
}

基于vue的element-ui中无总页数的分页封装相关推荐

Word2013、2016中页码总页数设置为当前节总页数
假设前3页是封面,从第4页开始插入页面,其设置方法: 1.将光标放在第4页的首部,单击布局---->分隔符---->分节符---->下一节,如图所示: 2.在第4页的页脚处双击鼠标, ...
关于Vue框架Element UI中分页器，当前页的问题
页面跳转后,再返回本页面依然是之前跳转时的pageNum. ---当分页超过2页时,在大于等于第二页中进行跳转,跳转到其他页面后返回,依然是跳转时的页面. 这里面涉及到的参数传递自然是用router中 ...
基于Coravel定时任务之计算总页数
目录基于Coravel定时任务之计算总页数 1 应用背景 2 对比各家定时库 2.1 TaskScheduler 2.2 Fluent Scheduler 2.3 Quartz.net 2.4 Ha ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

基于vue的element-ui中无总页数的分页封装

基于vue的element-ui中无总页数的分页封装相关推荐

最新文章

热门文章