element的分页组件pagination的二次封装

一、封装 pagination组件

Pagination.vue

<template>
  <div
    :class="{
      hidden: hidden
    }"
    class="pagination-container"
  >
    <span
      class="refresh_icon el-icon-refresh"
      title="刷新"
      @click="handleRefreshTable"
    ></span>
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-sizes="pageSizes"
      :page-size.sync="pageSize"
      :layout="layout"
      :total="total"
      :pager-count="pagerCount"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    hidden: { // 控制 分页是否出现，这里一般设置total小于等于0的时候，将分页组件隐藏。
      type: Boolean,
      default: false
    },
    total: { // 数据总条数
      required: true,
      type: Number
    },
    page: {
      //当前页
      type: Number,
      default: 1
    },
    limit: {
    //每页显示条目个数， 限制 每页多少条数据
      type: Number,
      default: 10
    },
    pageSizes: { // 每页显示个数选择器的选项设置,下拉选择框的选项值
      type: Array,
      default() {
        return [10, 20, 30, 50];
      }
    },
    layout: { // 组件布局
      type: String,
      default: "total, sizes, prev, pager, next, jumper"
    },
    background: { // 是否为分页按钮添加背景色，默认有背景，数字在蓝色的小框内的样式
      type: Boolean,
      default: true
    },
    pagerCount: {  //页码按钮的数量， 默认显示7个数，当总页数超过该值时会折叠,注意这里：它必须是 大于等于 5 且小于等于 21 的奇数
      type: Number,
      default: 7
    }
  },
  computed: {
    currentPage: {  // 计算属性返回当前页 （会改变）
      get() {
        return this.page;
      },
       set(val) {
        this.$emit("update:page", val);
      }
    },
    pageSize: { // 返回每页的限制条数，如每页30条，支持 .sync 修饰符实现同步更改
      get() {
        return this.limit;
      },
      set(val) {
      //当 pageSize 值发生更改时，在 computed 中会触发 pageSize 的 set 方法，修改父组件的 limit 值
        this.$emit("update:limit", val);
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    handleRefreshTable() {
      this.$emit("handleRefreshTable", {
        current: this.currentPage,
        pageSize: this.pageSize
      });
    }
  }
};
</script>
<style lang="scss">
.pagination-container {
  background: #f1f1f1;
  display: flex;
  width: 100%;
  .refresh_icon {
    width: 32px;
    color: #409eff;
    margin: 8px 0 0 15px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
  }
}
.hidden {
  display: none;
}
</style>

二、在组件中引入，并使用 刚刚封装的Pagination组件

Test .vue文件：

<template>
  <div class="test">
    <el-button type="primary" @click="handleChangeTotal">更改total数</el-button>
     <comn-pagination
         :total="myPages.total"
         :limit.sync="myPages.pageSize"
         :page.sync="myPages.pageNum"
         :hidden="myPages.total <= 0"
         @handleCurrentChange="handleCurrentChange"
         @handleSizeChange="handleSizeChange"
         @handleRefreshTable="handleRefreshTable"
     ></comn-pagination>
  </div>
</template>
<script>
import comnPagination from "@/components/Pagination.vue"
export default {
components:{
comnPagination
},
  data() {
    return {
      myPages: {
        pageSize: 10,
        pageNum: 1,
        total: 30
      },
      tableInfo: {
        // 要传给后台的数据       
        pageNum: 1,// 当前页为 1
        pageSize: 10// 每页10条
      }
    };
  },
  methods: {
    handleChangeTotal() {
      // 一般是，从后台拿到列表数据的时候，更新total的值， 这里只是做一个更改示例
      let total = 100;
      this.$set(this.myPages, "total", total);
    },
    handleSizeChange(val) {
      console.log("每页条数改变：", val);
      // 在这里更改 一页的条数，并刷新列表
      this.$set(this.tableInfo, "pageSize", val);
    },
    handleCurrentChange(val) {
      console.log("当前页改变：", val);
      this.$set(this.tableInfo, "pageNum", val);
      // 在这里刷新列表
    },
    handleRefreshTable(val) {
      console.log("刷新当前页：", val);
      this.$set(this.tableInfo, "pageNum", val.current);
      this.$set(this.tableInfo, "pageSize", val.pageSize);
      // 在这里刷新列表
    }
  }
};
</script>

更改total后：

三、后期更新

tip:
后期发现，上面的各方法之间要处理的事情大为相同，如 分页组件中的 handleRefreshTable, handleSizeChange,以及 handleCurrentChange 的方法，在父组件中最终的作用基本都是，更改需要传递给后台的分页参数（如，页码pageNum 和每页条数 pageSize）,并向后台请求列表数据，那上述封装方式未免繁复，故做了如下更改：

1. 刚说的三个方法触发的是同一个方法，故父组件在使用分页组件的时候，只需绑定一个方法即可。

Pagination.vue 文件内容如下:

<template>
  <div
    :class="{
      hidden: hidden
    }"
    class="pagination-container"
  >
    <span
      class="refresh_icon el-icon-refresh"
      title="刷新"
      @click="handleRefreshTable"
    ></span>
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-sizes="pageSizes"
      :page-size.sync="pageSize"
      :layout="layout"
      :total="total"
      :pager-count="pagerCount"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    hidden: {
      type: Boolean,
      default: false
    },
    total: {
      required: true,
      type: Number
    },
    page: {
      //当前页
      type: Number,
      default: 1
    },
    limit: {
      // 限制 每页多少条数据
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50];
      }
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper"
    },
    background: {
      type: Boolean,
      default: true
    },
    pagerCount: {
      type: Number,
      default: 7
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      }
    },
    pageSize: {
      get() {
        return this.limit;
      },
      set(val) {
        this.$emit("update:limit", val);
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("pagination", {
        current: this.currentPage,
        pageSize: val
      });
    },
    handleCurrentChange(val) {
      this.$emit("pagination", {
        current: val,
        pageSize: this.pageSize
      });
    },
    handleRefreshTable() {
      this.$emit("pagination", {
        current: this.currentPage,
        pageSize: this.pageSize
      });
    }
  }
};
</script>
<style lang="scss">
.pagination-container {
  background: #f1f1f1;
  display: flex;
  width: 100%;
  .refresh_icon {
    width: 32px;
    color: $header_bg;
    margin: 8px 0 0 15px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
  }
}
.hidden {
  display: none;
}
</style>

引入刚刚的Pagination.vue组件并注册使用：

Test .vue文件：

<template>
  <div class="test">
    <p>当前页----- {{ myPages.pageNum }}; 每页条数----{{ myPages.pageSize }}</p>
    <comn-pagination
      :total="myPages.total"
      :limit.sync="myPages.pageSize"
      :pageNum.sync="myPages.pageNum"
      :hidden="myPages.total <= 0"
      @pagination="handlePag"
    ></comn-pagination>
  </div>
</template>
<script>
import comnPagination from "@/components/Pagination.vue";
export default {
  components: {
    comnPagination
  },
  data() {
    return {
      myPages: {
        pageSize: 10,
        pageNum: 1,
        total: 30
      },
      tableInfo: {
        // 要传给后台的数据
        pageNum: 1, // 当前页为 1
        pageSize: 10, // 每页10条
        type: 1 //其它参数，如类型
      }
    };
  },
  methods: {
    getLists(info) {
      // 一般是，从后台拿到列表数据的时候，更新total的值， 这里只是做一个更改示例
      const { pageNum, pageSize } = info;
      const res = {
        page: { pageNum, pageSize, total: 65, pages: 7 },
        result: [{ name: "数据----1" }]
      };
      this.$set(this.myPages, "total", res.page.total);
    },
    handlePag(item) {
      //页码改变和每页的条数改变，或是点击刷新按钮，都会触发这个函数
      this.$set(this.tableInfo, "pageNum", item.current);
      this.$set(this.tableInfo, "pageSize", item.pageSize);
      this.getLists(this.tableInfo); //请求列表数据
    }
  }
};
</script>

1. 更多详细的封装，请参考：PanJiaChen的vue-element-admin
2. 关于.sync修饰符，请参考官网