element ui Pagination 分页二次封装

效果图如下，后续还会为大家更新 自定义表格，日历，表单等组件的封装

封装组件内容

<template>
  <div class="j-el-pagination">
    <el-pagination
      v-bind="tableProprs"
      :current-page="data.current ? Number(data.current) : 0"
      :page-size="data.size ? Number(data.size) : 0"
      :layout="layout"
      :total="data.total ? Number(data.total) : 0"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

接受父组件传过来的值，给父组件指令触发对应的方法

<script>
import { Pagination } from "element-ui";
export default {
  props: {
    ...Pagination.props,
    data: {
      type: Object,
      default: () => {},
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
  },
  computed: {
    tableProprs() {
      const { data, ...elementTableProps } = this.$props;
      return { ...elementTableProps };
    },
  },
  methods: {
    handleSizeChange(value) {
      this.$emit("handleSizeChange", value);
    },
    handleCurrentChange(value) {
      this.$emit("handleCurrentChange", value);
    },
  },
};
</script>

在父组件引用，接收子组件的change事件

<template>
  <div class="page">
    <j-el-pagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :data="paginationData"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      paginationData: {},
    };
  },
  methods: {
    handleSizeChange(size) {
      console.log(size);
    },
    handleCurrentChange(current) {
      console.log(curret);
    },
  },
};
</script>
<style lang="less" scoped></style>

看到这里小伙伴们肯定有很多疑惑，父组件没有引入怎么能直接使用？动动开发者的小脑筋，不懂的可以评论区留言。