vue基于element-ui二次封装分页组件
程序员文章站
2022-07-09 19:30:55
之前在写代码的时候,很多页面都会有table展示,有table分页也基本少不了,而且element-ui的分组组件提供了四个事件,以及那么多参数,若每个分页都写下,复用性太低了,方便统一风格,好维护。尤其是方法多了后,代码很杂。版本:element-ui 2.13.1vue 2.6.11事件名称说明回调参数size-changepageSize 改变时会触发每页条数current-changecurrentPage 改变时会触发当前页prev-click用户...
之前在写代码的时候,很多页面都会有table展示,有table分页也基本少不了,而且element-ui的分组组件提供了四个事件,以及那么多参数,若每个分页都写下,复用性太低了,方便统一风格,好维护。尤其是方法多了后,代码很杂。
版本:element-ui 2.13.1
vue 2.6.11
事件名称 | 说明 | 回调参数 |
---|---|---|
size-change | pageSize 改变时会触发 | 每页条数 |
current-change | currentPage 改变时会触发 | 当前页 |
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();
},
本文地址:https://blog.csdn.net/pujihong/article/details/106720047
上一篇: apache+php配置优化
下一篇: 2020Python作业——类与对象