基于vue+element 分页的封装

**基于Vue + Element 的分页组件封装**

在实际开发中，分页功能是非常常见的需求之一。为了方便使用和维护，我们可以将其封装成一个独立的组件。下面我们就来实现一个基于 Vue + Element 的分页组件。

### 分页组件的设计我们的分页组件应该具备以下基本功能：

* 显示当前页数和总页数* 支持跳转到指定页数* 支持上一页和下一页的切换* 支持每页显示条目数量的选择* 支持数据加载和刷新### 组件代码实现首先，我们需要创建一个新的 Vue 组件文件，例如 `Pagination.vue`。

html<template>
 <div class="pagination">
 <!-- 分页信息 -->
 <span v-if="total >0">当前第 {{ currentPage }} / {{ total }}页</span>

 <!-- 分页按钮 -->
 <el-pagination @current-change="handleCurrentChange"
 :page-size="pageSize"
 :layout="layout"
 :total="total"
 :current-page.sync="currentPage"
 ></el-pagination>

 <!-- 每页显示条目数量选择 -->
 <div class="pagination-select">
 <span>每页显示:</span>
 <el-select v-model="pageSize" @change="handlePageSizeChange">
 <el-option v-for="(item, index) in pageSizeOptions"
 :key="index"
 :label="item"
 :value="item"
 ></el-option>
 </el-select>
 </div>

 <!-- 数据加载和刷新 -->
 <button @click="handleLoadData">加载数据</button>
 </div>
</template>

<script>
export default {
 name: "Pagination",
 data() {
 return {
 currentPage:1,
 total:0,
 pageSize:10,
 layout: "prev, pager, next",
 pageSizeOptions: [5,10,20],
 };
 },
 methods: {
 handleCurrentChange(val) {
 console.log(`当前页数改变：${val}`);
 },
 handlePageSizeChange(val) {
 console.log(`每页显示条目数量改变：${val}`);
 },
 handleLoadData() {
 // 加载数据逻辑 console.log("加载数据...");
 },
 },
};
</script>

<style scoped>
.pagination {
 margin-top:20px;
}

.pagination-select {
 display: inline-block;
 margin-left:10px;
}
</style>

html<template>
 <div>
 <!-- 使用分页组件 -->
 <Pagination :total="100" @load-data="handleLoadData"></Pagination>

 <!-- 加载数据逻辑 -->
 <button @click="handleLoadData">加载数据</button>
 </div>
</template>

<script>
import Pagination from "./Pagination.vue";

export default {
 name: "App",
 components: { Pagination },
 methods: {
 handleLoadData() {
 console.log("加载数据...");
 },
 },
};
</script>