Vue功能篇 - 1.分页组件

Vue分页组件的简单使用流程

支持两种模式
1.isBackPage为 true 时,返回的为页码 如pageIndex为1,pageSize为15
2.isBackPage为 false 时,返回的为limit范围 如pageIndex为0,pageSize为15,适用于直接Sql语句调用, 如select * from xxxx limit 0,15

1.分页组件代码

<!-- 分页公用组件 -->
<template>
  <div class="pagination">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.page_index" :page-sizes="paginations.page_sizes" :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total"></el-pagination>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
  	isBackPage:{type: Boolean, default: false},//两种模式 true:返回页码 false:返回limit范围 如0,5  5,5  10,5
    pageDataTotal: { type: Number, default: 0 }
  },
  data() {
    return {
      paginations: {
        page_index: 1, //当前页
        total: 0, //总数
        page_size: 15, //一页显示多少
        page_sizes: [5, 10, 15, 20, 30, 100, 200, 300], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"
      }
    };
  },
  mounted: function() {
    this.setPaginations();
  },
  methods: {
    setPaginations() {
      this.paginations.total = parseInt(this.pageDataTotal); //数据的数量
      this.paginations.page_index = this.paginations.page_index; //默认显示第一页
      this.paginations.page_size = this.paginations.page_size; //每页显示多少数据
    },
    handleSizeChange(page_size) {
      this.paginations.page_index = 1; //第一页
      this.paginations.page_size = page_size; //每页先显示多少数据
      let pageIndex=0;
      if(this.isBackPage){
      	pageIndex=1;
      }else{
		pageIndex=0;
	}
      this.$emit("paginationData", {
        pageDataTotal: this.pageDataTotal,
        pageIndex: pageIndex,
        pageSize: page_size
      });
    },
    handleCurrentChange(page) {
      let index=0;
      this.paginations.page_index=page;
      //代表从多少数据开始
      if(this.isBackPage){
		index=page;
		}else{
		index = this.paginations.page_size * (page - 1);
	}
      //每页显示多少数据
      let pageSize = this.paginations.page_size;
      this.$emit("paginationData", {
        pageDataTotal: this.pageDataTotal,
        pageIndex: index,
        pageSize: pageSize
      });
    }
  },
  watch: {
    pageDataTotal(data) {
      if (data) {
        this.paginations.total = parseInt(data);
        this.setPaginations();
      }
    }
  }
};
</script>

<style lang="scss">
.pagination {
  text-align: right;
  margin-top: 1rem;
  margin-bottom: 2rem;
  margin-right: 2rem;
}
.pagination .el-input .el-input__inner {
  height: 26px !important;
}
.pagination .el-select {
  height: 26px !important;
}
</style>

2.引入该组件并调用

<Pagination :pageDataTotal="paginationObject.pageDataTotal" @paginationData="paginationData"></Pagination>

3. data()中初始化数据

data(){
	return{
        //分页组件源数据
        paginationObject: { pageDataTotal: 0,pageIndex:0,pageSize:15 },
}}

4.methods中创建接收方法

methods:{
      /*
       *分页数据
       * */
      paginationData(data) {
        this.paginationObject.pageIndex = data.pageIndex;
        this.paginationObject.pageSize= data.pageSize;
        //在这里调用获取数据的方法
        //this.getxxxx();
      }
}