vue+element 封装分页组件

一. 创建Pagings.vue文件（子组件）

<template>
  <div class="pagetion">
    <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="offset"
      :page-size="pageSize" :page-sizes="[5,10,20,30]" layout=" prev, pager, next, sizes,jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
export default {

    data() {
        return {

        }
    },
      props: {
          total:{      // 总条目数
          type: Number,
          default: 1   //默认值
          },
         pageSize:{      //每页显示条目个数
         type: Number,
           default: 1
          },
         offset:{        //当前页数
         type: Number,
            default: 1
            },
              },
    methods: {
        handleSizeChange(val) {      //pageSize 改变时会触发
            this.$emit('handleSizeChangeSub', val);
        },
        handleCurrentChange(val) {   //currentPage 改变时会触发
            this.$emit('handleCurrentChangeSub', val);
        }
    },

}
</script>

二.在需要页面（父组件）引入Pagings.vue文件

<template>
  <div>


        <!-- 分页 -->
        <div >
          <Pagings :total="total" :offset="oAssEquipmentDto.offset" :pageSize="oAssEquipmentDto.pageNumber"
            @handleSizeChangeSub="handleSizeChange" @handleCurrentChangeSub="handleCurrentChange"></Pagings>
        </div>


  </div>
</template>

<script>

  import Pagings from '../../components/Pagings/index.vue'
  import http from "../../service/power.js";  //不需要
  const power = new http();  //不需要
  export default {
    data() {
      return {
        oAssEquipmentDto: {
          offset: 1,
          pageNumber: 5,
        },
        total: 1, //总条数
      };
    },
    components: {
      Pagings
    },

    created() {

      this.power();
   
    },
    methods: {
  
      power() {
                 //请求接口
        power.powerStationList(this.oAssEquipmentDto).then(res => {
            this.total = res.data.data.totalNum
            this.oAssEquipmentDto.offset = res.data.data.pageNum;
            this.oAssEquipmentDto.pageNumber = res.data.data.pageSize;
        });

      },

      handleSizeChange(val) {
        this.oAssEquipmentDto.pageNumber = val;
        this.power();
      },
      handleCurrentChange(val) {
        this.oAssEquipmentDto.offset = val;
        this.power();
      },

    }
  };
</script>