如何 二次封装element-ui的分页

二次封装Element UI的分页组件通常是为了满足特定项目的需求或者场景，使其更适应你的应用结构。以下是一个基本步骤：

1. **引入依赖**：
首先，在你的Vue项目中安装Element UI的`el-pagination`组件：

   npm install element-ui

2. **创建自定义组件**：
创建一个新的Vue文件（如`CustomPagination.vue`），并导入Element UI的分页组件：

   <template>
     <div class="custom-pagination">
       <el-pagination
         :total="total"
         :current-page="currentPage"
         :page-size="pageSize"
         @current-change="setCurrentPage"
         // 可能需要添加更多属性和事件处理函数
       ></el-pagination>
     </div>
   </template>

   <script>
   export default {
     props: {
       total: { type: Number, required: true }, // 总记录数
       currentPage: { type: Number, default: 1 }, // 当前页码
       pageSize: { type: Number, default: 10 } // 每页记录数
     },
     methods: {
       setCurrentPage(page) {
         this.currentPage = page;
         // 根据需求更新数据、状态等
       }
     }
   };
   </script>

3. **使用自定义组件**：
在父组件中，你可以像使用原生`el-pagination`一样使用这个自定义的分页组件，并传入所需的props值：

   <custom-pagination :total="data.total" :currentPage="currentPage" />

4. **定制样式**：
如果需要，可以为自定义组件添加额外的CSS以匹配项目的整体设计。