作者:多米音乐_34063629 | 来源:互联网 | 2023-12-11 16:53
本文介绍了如何使用elementui分页组件进行分页功能的改写,只需一行代码即可调用。通过封装分页组件,避免在每个页面都写跳转请求的重复代码。详细的代码示例和使用方法在正文中给出。
element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求,传入请求数据函数
<!--分页组件-->
<template><el-pagination small &#64;size-change&#61;"handleSizeChange" &#64;current-change&#61;"handleCurrentChange" :current-page&#61;"currentPage" :page-sizes&#61;"pageSizes" :page-size&#61;"pageSize" :layout&#61;"layout" :total&#61;"total"></el-pagination>
</template>
<script>
export default {name: &#39;erpPagination&#39;,props: {pageSize: [Number, String],currentPage: [Number, String],total: [Number, String],render: [Function],hideOnSinglePage:true,pageSizes: {type: Array,default: function() {return [10, 20, 30, 40, 50]}},layout: {type: String,default: &#39;total, sizes, prev, pager, next, jumper&#39;}},methods: {handleSizeChange(val) {this.$emit(&#39;update:pageSize&#39;, val)this.render();},handleCurrentChange(val) {this.$emit(&#39;update:currentPage&#39;, val)this.render();}}
};
</script>
调用方式
<pagination
:current-page.sync&#61;"pageTotal.page"
:total&#61;"pageTotal.total"
:page-size.sync&#61;"pageTotal.pageSize"
:render&#61;"getData">
</pagination>import Pagination from &#39;../Pagination&#39;;
export default {components: {&#39;pagination&#39;: Pagination},
}