vue自定义分页组件---切图网
2020-03-04 23:21
1071 查看
vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用。目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重新切图,重新VUE开发的项目来说,自定义分页组件才是应万变的最佳打开方式。
html
<template> <div class="pagination" v-if="totalPage>1"> <span v-if="!small" class="total">共{{totalCount}}条记录<!-- 第{{currentPage}}/{{totalPage}}页--></span> <ul class="paging"> <li class="prev" :class="{'disabled':currentPage<=1}" @click="currentPage<=1?'':turn(currentPage-1)"><i class="iconfont icon-chevron-left"></i></li> <li v-for="i in showPageBtn" class="num" :class="{'active':i==currentPage}" v-if="i>0" @click="turn(i)">{{i}}</li> <li v-else-if="i==='-'" class="num iconfont icon-more" :class="{'icon-d-arrow-left':toPrev}" @click="turn(currentPage-1)" @mouseenter="toPrev=true" @mouseleave="toPrev=false"></li> <li v-else-if="i==='+'" class="num iconfont icon-more" :class="{'icon-d-arrow-right':toNext}" @click="turn(currentPage+1)" @mouseenter="toNext=true" @mouseleave="toNext=false"></li> <li class="next" :class="{'disabled':currentPage>=totalPage}" @click="currentPage>=totalPage?'':turn(currentPage+1)"><i class="iconfont icon-chevron-right"></i></li> </ul> <select v-if="!small" v-model="limitNum" @change="turn(currentPage)"> <option v-for="item in limitNums" :value="item">{{item}}条/页</option> </select> <span v-if="all" class="jump">前往<input type="number" autocomplete="off" min="1" :max="totalPage" v-model="goPage" @keyup.enter="turn(goPage)">页</span> </div> </template>
js
<script> export default { name:'MyPagination', props: { currentPage: {//当前页 type: Number, default: 1, }, limit:{//每页显示条数 type: Number, default: 10, }, totalCount:{//总条数 type: Number, required: true }, small:{ type:Boolean, default: false, }, all:{ type:Boolean, default: false, } }, data() { return { goPage:'', limitNum:'', limitNums:[5,10,15,20,25,30], toPrev:false, toNext:false, } }, created: function () { this.initLimitNums(); }, computed: { totalPage(){ return Math.ceil(this.totalCount / this.limit) }, showPageBtn() { let pageNum = Number(this.totalPage), index = Number(this.currentPage), arr = []; if (pageNum <= 9) { for(let i = 1; i <= pageNum; i++) { arr.push(i) } return arr } if (index < 5) return [1,2,3,4,5,6,7,'+',pageNum] if (index >= pageNum -1) return [1,2,'-', pageNum -5,pageNum -4,pageNum -3, pageNum -2, pageNum -1, pageNum] if (index === pageNum -2) return [1,2,'-', pageNum -5,pageNum -4,pageNum-3, pageNum-2, pageNum-1, pageNum] return [1,'-', index-2,index-1, index, index + 1,index + 2, '+', pageNum] } }, methods: { initLimitNums() { this.limitNum=this.limit; //if (this.limitNums.indexOf(this.limit) == -1) { if (!this.limitNums.includes(this.limit)) { this.limitNums.push(this.limit); this.limitNums.sort(function (a, b) { return a-b; }); } }, //翻页,显示条数变化 turn(page) { let i = parseInt(Number(page)); if(i<1){ i=1; }else if(i>this.totalPage){ i=this.totalPage; } if(this.limitNum!==this.limit&&this.limitNum!==''){//每页显示条数改变 let pages=Math.ceil(this.totalCount / this.limitNum); if(page>pages){ i=pages; } this.$emit('update:limit', this.limitNum); } this.$emit('update:currentPage', i); this.$emit('turn'); } } } </script>
<!–测试-分页–>
<template> <div class="box"> ... <my-pagination :currentPage.sync="currentPage" :limit.sync="limit" :totalCount="totalCount" @turn="getTableData"></my-pagination> </div> </template>
JS
<script> import MyPagination from './Pagination' export default { components: { MyPagination }, data() { return { currentPage: 1,//当前页码 limit: 10,//每页显示条数 totalCount:0,//总页数 } }, created: function () { this.getTableData(); }, methods: { getTableData() { let params = this.$qs.stringify({ 'pageSize': this.limit, 'pageNum': this.currentPage }); this.$http.post('/api/...', params).then(res => { this.totalCount = res.data.totalCount; }); } } } </script>
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- Vue.js实现一个自定义分页组件vue-paginaiton
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- vue中的自定义分页插件组件的示例
- vue学习--自定义全局vue组件
- Vue中自定义组件
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
- VUE实现一个分页组件
- 关于vue2.2.0创建自定义组件v-model双向绑定数据
- vue--自定义全局方法,在组件里面使用
- Vue自定义组件(一)货币输入框
- vue自定义组件和列表循环--vue学习笔记
- vue的一个分页组件的示例代码
- vue.js2.0 自定义组件初体验
- Vue 自定义组件使用v-model
- 基于vue2.0的一个分页组件
- vue进阶(1) ---自定义组件
- vue 自定义注册全局notification消息通知组件
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等
- Vue 自定义动态组件实例详解
- vue2.0 自定义 饼状图 (Echarts)组件