vue基于element-ui二次封装分页组件

之前在写代码的时候，很多页面都会有table展示，有table分页也基本少不了，而且element-ui的分组组件提供了四个事件，以及那么多参数，若每个分页都写下，复用性太低了，方便统一风格，好维护。尤其是方法多了后，代码很杂。
版本：element-ui 2.13.1
vue 2.6.11

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发改变时会触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

第一步，封装组件，把需要的属性提出来。

<template>
  <div class="pagination">
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-sizes="pageSizesArr"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      :layout="layout"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    // 总页数
    total: {
      type: Number,
      default: 0
    },
    // 当前页
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页显示条数
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizesArr: {
      type: Array,
      default() {
        return [10, 20, 30, 50];
      }
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper"
    }
  },
  data() {
    return {
      page: {
        _pageSize: this.pageSize,
        _currentPage: this.currentPage
      }
    };
  },
  methods: {
    //  每页查看条数变化
    handleSizeChange(val) {
      console.log(val);
      this.page._pageSize = val;
      this.$emit("pageChange", this.page);
    },
    // 当前页码变化
    handleCurrentChange(val) {
      this.page._currentPage = val;
      this.$emit("pageChange", this.page);
    }
  }
};
</script>

<style scoped lang="scss">
.pagination {
  margin: 20px 0;
}
</style>

调用

 <Pagination :total="total" :pageNum="pageNum" :pageSize="pageSize" @pageChange="pageChange"/>
 
 import Pagination from "@/components/Pagination/index";
  components: {
    Pagination
  },

定义

  data() {
    return {
      articleList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0
    };
  },

方法

    pageChange(page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.getData();
    },

vue基于element-ui二次封装分页组件

猜你喜欢