在element-ui分页基础上封装自己的分页组件

我们在开发后台管理系统的时候不可避免的会遇到列表分页需求，element 官方尽管已经帮我们封装好了,但是我们每次调用的时候依然要传递不少参数，看上去很复杂，为此我们可以以此封装一个自己的分页组件。
在开发之前我们需要清除自己需要的参数，我这里用的是这些。

pagination.png

 

接下来我们就开始正式封装我们的pagination组件。

 

<template>
  <div class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30, 40, 50, 60, 80, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="currentPage"
      :page-size="limit"
      :total="total"
      :small="small">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "pagination",
    data() {
      return {
        currentPage: 1
      }
    },
    props: {
      // 避免直接改变prop属性
      // 'currentPage': {
      //   required: false,
      //   default: 1
      // },
      'total': {
        required: false,
        default: 0
      },
      'limit': {
        required: false,
        default: 10
      },
      'small': {
        required: false,
        type: Boolean,
        default: false
      }
    },
    watch: {
      currentPage(val) {
        // 改变这个值并不会触发 handleCurrentChange
        if (typeof val === "number") {
          console.log('prop currentPage!!!');
          this.currentPage = val;
        }
      },
    },
    methods: {
      // 当前页变化
      handleCurrentChange(val) {
        this.$emit("handleCurrentChange", val);
      },
      // size变化
      handleSizeChange(val) {
        this.currentPage = 1;
        this.$emit('handleSizeChange', val);
      },
    }
  }
</script>

<style scoped>
  .pagination {
    margin: 20px 0;
    text-align: center;
  }
</style>

这里有个小坑，不要尝试直接改变currentPage这个属性，因为当你切换分页的时候会触发改变prop属性，改放在data或computed中定义。

errorMessage.png

 

完成pagination组件的封装后，我们可以这样调用，这样省略了很多参数看上去简单多了。

 

<template>
  <pagination :currentPage="currentPage" :total="total" :limit="limit" :small="true"
              @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"/>
</template>

<script>
  import {invokeApi} from '@/service/api'
  import pagination from "@framework/pagination"

  export default {
    name: "",
    components: {
      pagination
    },
    data() {
      return {
        dataList: [],
        currentPage: 1,
        limit: 10,
        total: 0
      }
    },
    methods: {
      getDataList() {
        let json = {
          limit: this.limit,
          page: this.currentPage
        };
        // 调用后端接口，这里是封装过的
        invokeApi(json).then(res => {
          this.dataList = res.list;
          this.total = res.total;
        });
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getDataList();
      },
      handleSizeChange(val) {
        this.limit = val;
        this.currentPage = 1;
        this.getDataList();
      }
    },
    created() {
      this.getDataList();
    }
  }
</script>