欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-09 19:30:55
之前在写代码的时候,很多页面都会有table展示,有table分页也基本少不了,而且element-ui的分组组件提供了四个事件,以及那么多参数,若每个分页都写下,复用性太低了,方便统一风格,好维护。尤其是方法多了后,代码很杂。版本:element-ui 2.13.1vue 2.6.11事件名称说明回调参数size-changepageSize 改变时会触发每页条数current-changecurrentPage 改变时会触发当前页prev-click用户...

之前在写代码的时候,很多页面都会有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();
    },

本文地址:https://blog.csdn.net/pujihong/article/details/106720047

相关标签: vue