一文教你用vue封装分页器

前言

分页器大家都知道，在开发中使用场景也非常多，那我们是不是可以将它作为一个公共组件封装起来供各个页面来使用呢？本篇文章就教大家怎么封装分页器。

实现思路

1、用到的参数

pageNum: 1 默认第几页
pageSize: 10 一页展示几条
total: 0 总条数

2、用到的事件方法

@size-change="sizeChange" 每页展示几条数据，改变时触发
@current-change="currentChange" 页码变化触发
:page-sizes="[5, 10, 15, 20]" 每页显示个数选择器的选项设置
layout="total, sizes, prev, pager, next, jumper" 组件布局，子组件名用逗号分隔
:current-page.sync="pageNum" 当前页数，支持 .sync 修饰符
:page-size="pageSize" 每页显示条目个数，支持 .sync 修饰符

3、数据传递的方法

props 父传子
$emit 子传父

4、实现过程

1.首先定义一个子组件页面用来封装分页，我这边直接用的 element 的分页组件；
2.在父组件中(使用的页面)引入封装组件(子组件)并注册，然后在页面中使用，在父组件中给标签(注册的组件名)上绑定一个属性，属性上挂载需要传递的值，通过 props 在子组件(封装文件)接收数据；
3.在子组件中自定义一个事件，调用这个事件后，子组件通过 this.$emit('自定义事件名',要传递的数据) 发送父组件可以监听的数据，最后父组件监听子组件事件，调用事件并接收传递过来的数据。

代码详解

封装文件 /src/components/paging/index.vue

<template>
  <div>
    <!-- //分页器封装文件 -->
    <el-pagination v-if='total > 0' @size-change="sizeChange" @current-change="currentChange" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :current-page.sync="pageNum" :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "Paging",
    data() {
      return {
        pageNum: 1, //当前页数为第一页
        pageSizes: [5, 10, 15, 20], //每页显示多少条
      };
    },
    //子组件接收父组件的值
    props: {
      total: {
        //总数据条数
        required: false, //是否必填
        default: 0, //默认值为0
      },
      pageSize: {
        required: false, //是否必填
        default: 10, //默认显示10条
      },
    },
    watch: {
      //监听页数变化
      pageNum(val, index) {
        if (typeof val === "number") {
          this.pageNum = val;
        }
      },
    },
    // 事件方法
    methods: {
      // 每页展示几条变化
      sizeChange(val) {
        //子组件向父组件传值
        this.$emit("sizeChange", val);
      },
      // 页码变化
      currentChange(val) {
        //子组件向父组件传值
        this.$emit("currentChange", val);
      },
    },
  };
</script>

使用文件 /src/views/netelement/index.vue

<template>
  <div>
    <!-- //表格 -->
    <div class="tableBox">
      <el-table :data="tableData" stripe border>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="createtime" label="编号"></el-table-column>
        <el-table-column prop="desc" label="备注"></el-table-column>
        <el-table-column prop="updatetime" label="电话号码"></el-table-column>
      </el-table>
    </div>
    <!-- //分页器 -->
    <div v-show="total>0" class="pagingBox">
      <Paging :pageNum="gather.pageNum" :total="total" :pageSize="gather.pageSize"
        @sizeChange="sizeChange" @currentChange="currentChange" />
    </div>
  </div>
</template>
<script>
  import {getFactoryListAsync} from "@/api/commonRequest.js"; //引入接口文件
  import Paging from "@/components/paging/index.vue"; //引入封装的分页器文件
  export default {
    data() {
      return {
        tableData: [], //表格数据
        total: 0, //数据总条数
        gather: {
          pageNum: 1,//默认第一页
          pageSize: 10,//一页展示10条
        }
      };
    },
    components: { //一定要注册组件
      Paging
    },
    mounted() {
      this.getFactoryListAsync() //定义一个方法调用
    },
    methods: {
      // 调用方法
      getFactoryListAsync() {
        // 接口方法
        getFactoryListAsync(this.gather).then(res => {
          if (res.code == '1000') {
            // 赋值操作
            this.tableData = res.data.rows
            this.total = res.data.total
          }
        })
      },
      // 点击页码及上一页下一页按钮操作
      currentChange(val) {
        this.gather.pageNum = val;
        this.getFactoryListAsync(); //调用接口方法
      },
      //每页展示几条按钮操作
      sizeChange(val) {
        this.gather.pageSize = val;
        this.getFactoryListAsync(); //调用接口方法
      },
    },
  };
  
</script>
<style scoped>
  .tableBox {
    margin-bottom: 20px;
  }

  .pagingBox {
    text-align: right;
  }

</style>