热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

elementui分页改写,一行代码调用的方法

本文介绍了如何使用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},
}

推荐阅读
author-avatar
多米音乐_34063629
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有