m-pagination

技术点

el-pagination 二次封装 .sync 的使用

介绍

对 el-pagination 进行二次封装，将本项目中统一使用的 background, small 等参数设置为默认值，将size-change, current-change 事件合并，以使在本项目中使用更便捷。

目录结构

└─ src
   └─ components
      └─ MPaginaction          # 分页

.sync 修饰符

官方文档 (opens new window)

本项目中如 :page-size.sync="pagination.per_page"，.sync 修饰符，可以省去 @size-change 事件时，去改变 pagination.per_page 的值。

代码

<template>
  <el-pagination
    background
    small
    :layout="layout"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
    :page-sizes="sizes"
    :page-size.sync="pagination.per_page"
    :current-page.sync="pagination.page"
    :total="pagination.total"
  />
</template>

/**
 * m-pagination
 * @module components/MPagination
 * @desc element-ui el-pagination 二次封装 传入pagination对象，接收方不需要再设置页码值
 * @param {string} [layout] - 同 element-ui
 * @param {object} pagination - 分页对象，支持 .sync 修饰符
 * @param {number} pagination.per_page - 每页显示条目个数
 * @param {number} pagination.page - 当前页数
 * @param {number} pagination.total - 总条目数
 * @param {array} [sizes] - 每页显示个数选择器的选项设置
 *
 * @example
 * <m-pagination :pagination.sync="pagination" @on-change="getData()" />
 */

export default {
  name: "MPagination",
  props: {
    layout: {
      default: "total, prev, pager, next, sizes, jumper",
    },
    pagination: {
      type: Object,
      required: true,
    },
    sizes: {
      type: Array,
      default() {
        return [20, 40, 60, 80, 100];
      },
    },
  },
  methods: {
    // 页码改变
    handleCurrentChange(page) {
      this.$emit("update:pagination", this.pagination);
      this.$emit("on-change", this.pagination);
    },
    // 分页数量改变
    handleSizeChange(size) {
      this.$emit("update:pagination", this.pagination);
      this.$emit("on-change", this.pagination);
    },
  },
};
</script>