vue element Pagination分页组件二次封装

vue+element 的分页组件封装

1.在components中创建GlobalPagination文件夹，代码如下

<template><div :class="{'hidden':hidden}" class="pagination-container"><el-pagination:background="background":current-page.sync="currentPage":page-size.sync="pageSize":layout="layout":page-sizes="pageSizes":total="total"v-bind="$attrs"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><script>
import { scrollTo } from '@/utils/scroll-to'
export default {name: 'Pagination',
props: {//总条目数total: {required: true,type: Number},//每页显示条目个数limit: {type: Number,default: 10},//当前页数page: {type: Number,default: 1},//每页显示个数选择器的选项设置pageSizes: {type: Array,default() {return [10, 20, 30, 40, 50, 80, 100]}},//组件布局，子组件名用逗号分隔layout: {type: String,default: 'total, sizes, prev, pager, next, jumper'},//分页按钮背景色设置background: {type: Boolean,default: true},//分页之后是否自动滚动到顶部autoScroll: {type: Boolean,default: true},//是否隐藏hidden: {type: Boolean,default: false}},computed: {currentPage: {get() {return this.page},set(val) {this.$emit('update:page', val)}},pageSize: {get() {return this.limit},set(val) {this.$emit('update:limit', val)}}},methods: {handleSizeChange(val) {this.$emit('pagination', { page: this.currentPage, limit: val })if (this.autoScroll) {scrollTo(0, 800)}},handleCurrentChange(val) {this.$emit('pagination', { page: val, limit: this.pageSize })if (this.autoScroll) {scrollTo(0, 800)}}}
}
</script><style scoped>
.pagination-container {background: #fff;padding: 32px 16px;
}
.pagination-container.hidden {display: none;
}
</style>

3.在main.js中引用，全局使用，代码如下

import Pagination from "@/components/GlobalPagination/index"
Vue.component('Pagination', Pagination)

4.在使用组件，代码如下

<template><div class="all-goods"><pagination v-show="paramsPage.total>0" :total="paramsPage.total" :page.sync="paramsPage.page" :limit.sync="paramsPage.limit" @pagination="handlePagination" /></div></div>
</template>
<script>
export default {components:{Pagination},data() {return {paramsPage: {page: 1,limit: 10,total: 0,},};},mounted(){},methods:{// 获取用户列表getUserTableList() {getUserList(this.paramsPage).then((res) => {this.loading = trueif (res.code === '0') {this.userList = res.info.listthis.paramsPage.total = res.info.totalCountthis.loading = false} else {this.$message.error('请求失败')}})},//分页回调方法handlePagination(data){this.pageQuery.pageNum = val.pagethis.pageQuery.pageRow = val.limit//这是列表的方法this.getUserTableList()},}
}
</script>

5.这是utils中的scrollTo方法文件

Math.easeInOutQuad = function(t, b, c, d) {t /= d / 2if (t < 1) {return c / 2 * t * t + b}t--return -c / 2 * (t * (t - 2) - 1) + b}// requestAnimationFrame for Smart Animating http://goo.gl/sx5stsvar requestAnimFrame = (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }})()/*** Because it's so fucking difficult to detect the scrolling element, just move them all* @param {number} amount*/function move(amount) {document.documentElement.scrollTop = amountdocument.body.parentNode.scrollTop = amountdocument.body.scrollTop = amount}function position() {return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop}/*** @param {number} to* @param {number} duration* @param {Function} callback*/export function scrollTo(to, duration, callback) {const start = position()const change = to - startconst increment = 20let currentTime = 0duration = (typeof (duration) === 'undefined') ? 500 : durationvar animateScroll = function() {// increment the timecurrentTime += increment// find the value with the quadratic in-out easing functionvar val = Math.easeInOutQuad(currentTime, start, change, duration)// move the document.bodymove(val)// do the animation unless its overif (currentTime < duration) {requestAnimFrame(animateScroll)} else {if (callback && typeof (callback) === 'function') {// the animation is done so lets callbackcallback()}}}animateScroll()}

vue element Pagination分页组件二次封装相关推荐

Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
antd-vue table组件二次封装（ts版本）
前言:现在公司开发大佬们都在用ant框架了,既然换框架,当然得重新二次封装组件,table又是最最常用的组件,所以打算记录一下目前在项目中用到的封装完成的table组件.非常方便,就算换项目,复制过去 ...
微信小程序|开发实战篇之六-pagination分页组件
开发实战篇之六前言 1.分页组件pagination 2.pagination代码分析 2.1 wxml骨架文件 2.2 wxss样式 2.3 pagination的逻辑文件前言实战篇内容参考: ...
vue element 的 el-cascade 组件如何实现多选点击确认提交操作
1. 实现效果做这个也是自己踩了好多坑,比如: 用第三方的 el-cascader-multi 多选组件,不能实现自己想要的效果,element 最新版 2.12.0 就已经有完善,不需要使用那个第 ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...

vue element Pagination分页组件二次封装

vue+element 的分页组件封装

vue element Pagination分页组件二次封装相关推荐

最新文章

热门文章