vue分页组件再封装

官网已经封装很好了，但是多个地方用还是觉得麻烦，因此再封装了一个vue组件

组件内容 ，组件名称pagination.vue

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

  </div>
</template>

<script>
    export default {
        name: "pagination",
      data() {
        return{
          paginations: {
            page_index: 1, // 当前位于哪页
            page_size: 15, // 1页显示多少条
            page_sizes: [5, 15, 30, 50, 75, 150, 300, 500], //每页显示多少条
            layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
          }
        }
      },
      props:{
          total:{
            Type:Number
          }
      },
      methods:{
        // 每页多少条切换
        handleSizeChange(page_size) {
          this.paginations.page_size = page_size;
          this.$emit("paginationChange")
        },
        // 上下分页
        handleCurrentChange(page_index) {
          this.paginations.page_index = page_index * 1;
          this.$emit("paginationChange")

        },
      }
    }
</script>

<style scoped>

</style>

父组件中使用方式：

父组件中引入。

<pagination :total="total" @paginationChange="pgChange" ref="paginationCom"></pagination>

 

父组件data中定义total变量，form对象

 

total:0,
form:{
  page: 1, // 当前位于哪页
  page_size: 15, // 1页显示多少条
},

 

 

 

定义pgchange事件

 

pgChange(){

  let _this=this

  this.form.page=this.$refs.paginationCom.paginations.page_index

  this.form.page_size=this.$refs.paginationCom.paginations.page_size

  let url=config.GET_MyTaskList+"?token="+this.$store.state.token

  helpTools.axiosPost(url,_this.form,_this.loadTableList)

},

 

初始化请求时，将total变量传递给分页组件

this.total=res.data.data.total