vue2、element-UI二次封装Pagination 分页组件

最新推荐文章于 2025-03-12 09:59:09 发布

哈希嘛喇

最新推荐文章于 2025-03-12 09:59:09 发布

阅读量365

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue2组件封装文章标签： ui vue.js javascript elementui vue 前端

本文链接：https://blog.csdn.net/weixin_70397152/article/details/145592516

废话不多，直接上代码,

一、目录结构

在components下新建commonPagination文件夹，并新建index.vue及index.js

1.index.vue代码

<template>
  <!-- 分页组件 -->
  <el-pagination
    @size-change="sizeChange"  
    @current-change="pageChange"  
    :current-page="currentPage" 
    :page-sizes="pageSIzes"  
    :page-size="currentSize"  
    :layout="layout" 
    :total="total"  
    :pager-count="5"  
    background  
    small  
  >
  </el-pagination>
<!-- 页尺寸变化时触发 -->
<!-- 当前页变化时触发 -->
 <!-- 当前页数 -->
<!-- 可选的每页条数数组 -->
<!-- 每页显示的条数 -->
 <!-- 分页组件的布局 -->
<!-- 数据总条数 -->
<!-- 最多显示的页码数量 -->
<!-- 分页组件背景色 -->
<!-- 小尺寸样式 -->
</template>

<script>
export default {
  props: {
    total: {  <!-- 总条数，默认值为0 -->
      type: Number,