系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网络编程 > CSS/HTML > 详细页面

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

时间:2020-09-06来源:www.pcxitongcheng.com作者:电脑系统城

首先引入框架和配置我就不说了,相信对大家来说不是问题,主要是怎么把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赋值,如果遇到问题请留言
复制代码

 


 
分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载