ElementUI分页组件的封装

1.准备封装

创建index.vue

路径：src-->components-->Pagination-->index.vue

<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.sync="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,default: 0},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [10, 20, 30, 50]}},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 {text-align: right;background: #fff;padding: 32px 16px;
}
.pagination-container.hidden {display: none;
}
</style>

2.main.js全局挂载组件

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

3.在页面内使用组件

<paginationv-show="total > 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/>

4.scroll-to.js文件

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/sx5sts
var 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()
}

ElementUI分页组件的封装相关推荐

vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
ES6公用分页组件的封装及应用举例
ES6公用分页组件的封装及应用举例,以下源码使用到JQuery.Sass,重要的是方法,不合适可以根据自己的需要改改. 分页类以下为pagination.js源码 import './paginat ...
elementUI 分页组件Bug ，为什么会 infinity ？
个人项目经验总结: 是因为后台的原因,逻辑少走了一层. 而前端页面初次加载的时候直接提交默认参数,然后后台没有按照提交的参数一致性response返回给前端,而是后台自定义的参数值返回给前端渲染的,所 ...
elementUI 分页组件的使用 - 踩坑篇
elementUI 分页组件的使用.API调用.获取服务端数据.并初始化渲染页面:(踩坑一则) 因每个公司 / 每个项目 / 客户需求 / 都各有差异,所以本例只是demo说解,并非举一反三或万能分页 ...
用vue element-ui分页组件构建一个简单的分页 ( 超详细 )
element-ui分页组件: 以下代码都是干货,欢迎大家互相评论学习方法一数据绑在div上: <template> <div><div v-for="(v ...
vue-cli使用element-ui分页组件
vue-cli安装element-ui并使用分页组件根据element-ui的官方文档官网地址:http://element.eleme.io/#/zh-CN 使用npm或者cnpm(淘宝 ...
ElementUI分页组件+Vue
一. ElementUI分页组件 1 官网官网地址:http://element-cn.eleme.io/#/zh-CN 2 入门案例: 第一步:创建vue的基本页面 <!DOCTYPE ht ...
elementUI分页组件实现表格数据序号累加功能
文章目录前言一.基本结构二.效果预览总结前言 Vue项目借助elementUI开发后台管理系统时,遇到的一个需求,就是每页展示5条数据,数据序号为1-5,下一页就需要从6开始,以此类推-一起 ...
Element-UI分页组件超详细使用示例
为查询按钮绑定查询方法,也就是click点击事件绑定: 为分页组件绑定查询方法: 搜索官方提供的示例:

ElementUI分页组件的封装

1.准备封装

创建index.vue

2.main.js全局挂载组件

3.在页面内使用组件

4.scroll-to.js文件

ElementUI分页组件的封装相关推荐

最新文章

热门文章