之前在写代码的时候,很多页面都会有table展示,有table分页也基本少不了,而且element-ui的分组组件提供了四个事件,以及那么多参数,若每个分页都写下,复用性太低了,方便统一风格,好维护。尤其是方法多了后,代码很杂。
版本:element-ui 2.13.1
vue 2.6.11

事件名称说明回调参数
size-changepageSize 改变时会触发每页条数
current-changecurrentPage 改变时会触发当前页
prev-click用户点击上一页按钮改变当前页后触发 改变时会触发当前页
next-click用户点击下一页按钮改变当前页后触发当前页
第一步,封装组件,把需要的属性提出来。
<template> <div class="pagination"> <el-pagination
@current-change="handleCurrentChange" @size-change="handleSizeChange"
:page-sizes="pageSizesArr" :total="total" :current-page="currentPage"
:page-size="pageSize" :layout="layout" ></el-pagination> </div> </template>
<script> export default { name: "Pagination", props: { // 总页数 total: { type:
Number, default: 0 }, // 当前页 currentPage: { type: Number, default: 1 }, //
每页显示条数 pageSize: { type: Number, default: 10 }, pageSizesArr: { type: Array,
default() { return [10, 20, 30, 50]; } }, layout: { type: String, default:
"total, sizes, prev, pager, next, jumper" } }, data() { return { page: {
_pageSize: this.pageSize, _currentPage: this.currentPage } }; }, methods: { //
每页查看条数变化 handleSizeChange(val) { console.log(val); this.page._pageSize = val;
this.$emit("pageChange", this.page); }, // 当前页码变化 handleCurrentChange(val) {
this.page._currentPage = val; this.$emit("pageChange", this.page); } } };
</script> <style scoped lang="scss"> .pagination { margin: 20px 0; } </style>
调用
<Pagination :total="total" :pageNum="pageNum" :pageSize="pageSize"
@pageChange="pageChange"/> import Pagination from
"@/components/Pagination/index"; components: { Pagination },
定义
data() { return { articleList: [], pageSize: 10, pageNum: 1, total: 0 }; },
方法
pageChange(page) { this.pageSize = page._pageSize; this.pageNum =
page._currentPage; this.getData(); },

技术
©2019-2020 Toolsou All rights reserved,
中国移动科普:为什么手机移动网络要叫 “蜂窝移动网络”C语言---------俄罗斯方块(源代码)javascript事件(零基础详解)python实现vlookup_干货一:怎么在python里面实现vlookupC语言中数据的存储List集合中的常见面试题以及简单思路第十一届蓝桥杯python大学组国赛真题计算机科班出身和培训出身有什么区别?Java开发2020年最新常见面试题整理仿抖音小球刷新进度条(两个小球转动),代码很简单