Vue3+element-ui + TS封装全局分页组件

缺乏、安全感 2023-10-13 11:57 30阅读 0赞

本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。

### 环境依赖 ###

在开始之前，你需要安装以下环境：

*  Vue3
 *  element-ui
 *  TypeScript

### 组件功能 ###

这个分页组件提供以下功能：

*  支持自定义每页显示条数
 *  支持自定义跳转到指定页码
 *  支持显示总页数和总条数
 *  支持自定义样式

### 组件实现 ###

#### 分页组件结构 ####

分页组件由以下几部分组成：

#### 分页组件属性 ####

分页组件提供以下属性：

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>total</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>总条数</td> 
  </tr> 
  <tr> 
   <td>pageSize</td> 
   <td>Number</td> 
   <td>10</td> 
   <td>每页显示条数</td> 
  </tr> 
  <tr> 
   <td>currentPage</td> 
   <td>Number</td> 
   <td>1</td> 
   <td>当前页码</td> 
  </tr> 
 </tbody> 
</table>

#### 分页组件方法 ####

分页组件提供以下方法：

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>handleSizeChange</td> 
   <td>当每页显示条数发生变化时触发</td> 
  </tr> 
  <tr> 
   <td>handleCurrentChange</td> 
   <td>当页码发生变化时触发</td> 
  </tr> 
 </tbody> 
</table>

#### 分页组件样式 ####

你可以通过修改以下样式来自定义分页组件的样式：

.pagination {
        
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .el-pagination__sizes {
        
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
    
    .el-pagination__jump {
        
      margin-left: 20px;
    }
    
    .el-pagination__total {
        
      margin-right: 20px;
    }

### 使用分页组件 ###

使用分页组件非常简单。你只需要在你的Vue组件中引入我们封装好的Pagination组件，然后在template中使用即可。

<template>
      <div class="page">
        <pagination
          :total="total"
          :page-size="pageSize"
          :current-page.sync="currentPage"
        />
      </div>
    </template>
    
    <script lang="ts">
    import {
         defineComponent, ref } from 'vue'
    import Pagination from '@/components/Pagination.vue'
    
    export default defineComponent({
        
      name: 'Page',
      components: {
        
        Pagination,
      },
      setup() {
        
        const total = ref(1000)
        const pageSize = ref(10)
        const currentPage = ref(1)
    
        return {
        
          total,
          pageSize,
          currentPage,
        }
      },
    })
    </script>

### 总结 ###

本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。你可以根据自己的需求来修改我们提供的分页组件样式和属性。