欢迎光临
我的个人博客网站

结合element分页组件封装自己的分页组件(完整示例)

首先引入框架和配置我就不说了,相信对大家来说不是问题,主要是怎么把element的分页组件封装为自己的需要注意的坑

废话不多说,上代码:

首先是引入的element分页组件和配置属性

<template>   <div class="pagination">     <el-pagination       background       :layout="layout"       :pager-count="pagerCount"       :page-sizes="pageSizes"       :page-size="pageSize"       :total="pageTotal"       :current-page.sync="currentPages"       @size-change="sizeChange"       @current-change="current"       @prev-click="prev"       @next-click="next"     ></el-pagination>   </div> </template>

然后是传递的参数和默认值以及相关处理分页函数,参数见说明

<script> export default {   name: "HotelPaginationTemplate",   props: {     /*说明:如果下面的参数没传,就会按照默认值进行设置pageTotal,pageFunc函数必须传和绑定,     如果layout设置了sizes(指定当前页展示条数),则pageSize会按照指定的pageSizes数组里面     的值来设置,指定的pageSize会被覆盖*/     pageTotal: {       type: Number,       default: 1,//总页数     },     pagerCount: {       type: Number,       default: 11,//如果页数很多大概展示的页码     },     layout: {       type: String,       default: "total,sizes, prev, pager, next, jumper, ->, slot",//分页组件会展示的功能项     },     pageSizes: {       type: Array,       default: () => {         return [10, 20, 30, 40, 50, 100];//指定分页展示条数       },     },     currentPage: {       type: Number,       default: 1,//指定跳转到多少页     },     pageSize: {       type: Number,       default: 10,//每页展示的条数,根据自己实际,且会带入请求     },     pageNum: {       type: Number,       default: 1,//第几页数据,根据自己实际,且会带入请求     },   },   data() {     return {       pageData: {         pageSize: this.pageSize,         pageNum: this.pageNum,       },       currentPages: this.currentPage,     };   },   mounted() {},   methods: {     //选择每页显示数量     sizeChange(val) {       this.pageData.pageSize = val;       this.$emit("pageFunc", this.pageData);     },     //选择某一页     current() {       this.pageData.pageNum = this.currentPages;       this.$emit("pageFunc", this.pageData);     },     //上一页     prev() {       this.pageData.pageNum = this.pageData.pageNum - 1;       this.$emit("pageFunc", this.pageData);     },     //下一页     next() {       this.pageData.pageNum = this.pageData.pageNum + 1;       this.$emit("pageFunc", this.pageData);     },   }, }; </script>

相关样式:

<style lang="less" scoped> .pagination {   width: 100%;   padding:20px 0 20px 0; } </style>

实际引用:

<HotelPaginationTemplate       :pageSize="pageSize"       :layout="layout"       :pageTotal="pageTotal"       @pageFunc="pageFunc"     ></HotelPaginationTemplate>   import HotelPaginationTemplate from "@/components/HotelPaginationTemplate";   components: {     HotelPaginationTemplate,   },  data() {     return {         pageSize: 10, //每页显示条数         pageTotal: 1, //默认总条数         pageNum: 1, //实际当前页码         layout: "total,prev, pager, next, jumper, ->, slot",     };   },  //分页     pageFunc(data) {       this.pageSize = data.pageSize;       this.pageNum = data.pageNum;       this.getTablelist();//请求数据的函数     },              注意:请求成功之后给pageTotal赋值,如果遇到问题请留言

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 结合element分页组件封装自己的分页组件(完整示例)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏