element-plus表格二次封装

### Element Plus 表格组件二次封装 #### 封装需求分析 为了提高开发效率并简化页面逻辑，在实际项目中通常会对常用的UI库组件进行二次封装。对于`Element Plus`中的表格组件，常见的需求包括但不限于自定义配置项、统一的数据请求接口以及增强的功能扩展。 #### 创建基础结构 创建一个新的Vue 3.x工程或者在一个已有的项目里新建一个文件夹用于存放即将封装好的组件源码。假设这个路径为`src/components/CustomTable` ```javascript // src/components/CustomTable/index.js import { defineComponent } from 'vue'; import ElTable from "element-plus/lib/el-table"; import ElPagination from "element-plus/lib/el-pagination"; export default defineComponent({ name: "CustomTable", components: { ElTable, ElPagination }, props: { data: Array, // 数据列表 columns: Array, // 列定义 total: Number, // 总条数 pageSizes: Array, // 可选分页大小集合，默认[10, 20, 50, 100] currentPage: Number, // 当前页码 pageSize: Number, // 每页显示数量 loading: Boolean // 加载状态 } }); ``` 此部分代码初始化了一个基于`ElTable`和`ElPagination`的基础框架，并声明了一些必要的属性[^1]。 #### 实现核心功能 接下来完善内部逻辑，比如处理分页变化后的回调函数等： ```javascript methods: { handleSizeChange(val) { this.$emit('update:pageSize', val); this.$emit('page-change'); }, handleCurrentChange(val) { this.$emit('update:currentPage', val); this.$emit('page-change'); } } ``` 上述方法允许外部监听到分页参数的变化，并触发相应的更新动作[^3]。 #### 完整示例 最后给出完整的HTML模板与样式设置，形成一个可复用的定制化表格组件实例： ```html <template> <div class="custom-table"> <el-table :data="data" v-loading="loading" style="width: 100%"> <!-- 动态渲染表头 --> <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label"></el-table-column> </el-table> <!-- 如果有总记录数，则显示分页控件 --> <div v-if="total > 0" class="pagination-container"> <el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" :total="total" :page-sizes="pageSizes || [10, 20, 50, 100]" ></el-pagination> </div> </div> </template> <style scoped lang="scss"> .custom-table{ .pagination-container{ margin-top: 20px; text-align: center; } } </style> ``` 通过这种方式可以有效地减少重复劳动，提升团队协作效率的同时也增强了系统的灵活性和维护性。