在后台管理系统开发中，表格是最核心的 UI 组件之一。大多数项目需要频繁处理表格的分页、筛选、排序、自定义列等需求，如果每次都重复编写逻辑，不仅效率低，还容易出现代码不一致的问题。本文将基于 Vue3 + Element Plus，封装一个可复用、高扩展、易维护的通用表格组件，帮你彻底解决表格开发的重复工作。
一、技术栈说明
Vue3：采用 <script setup>语法糖（组合式 API），更简洁的代码组织方式Element Plus：Vue3 生态中最成熟的 UI 库，提供了基础的 ElTable 组件 Pinia（可选）：本文暂不涉及状态管理，聚焦组件封装本身 Vite：Vue3 官方推荐的构建工具（环境搭建不做赘述）
二、需求分析
我们要封装的通用表格需要满足以下核心需求：
支持自定义列配置（标题、字段、宽度、格式化、自定义渲染） 内置分页功能，与表格数据联动 支持表格排序、单选 / 多选 支持自定义操作列（如编辑、删除按钮） 提供加载状态、空数据占位提示 暴露通用方法（如刷新数据、重置筛选条件）
三、环境准备
首先确保你的项目已安装依赖：
在main.js中全局引入 Element Plus：
四、通用表格组件封装
在components目录下新建CommonTable.vue，这是我们的核心组件：
js代码：
css部分：
五、组件使用示例
在父组件（如UserList.vue）中使用我们封装的通用表格：
六、组件扩展建议
筛选功能：可以在通用表格中增加筛选栏配置，支持输入框、下拉框等筛选条件； 导出功能：集成 xlsx库，增加表格数据导出 Excel 的功能；行编辑：支持表格行内直接编辑，无需弹窗； 固定列：在列配置中增加 fixed属性，支持左右固定列；权限控制：结合权限系统，控制列的显示 / 隐藏、操作按钮的禁用 / 显示。
基于 Vue3 + Element Plus 封装通用表格组件，核心是通过Props 接收配置、插槽实现自定义渲染、Emits 暴露交互事件，兼顾通用性和扩展性； 通用表格组件可覆盖后台系统 80% 以上的表格场景，大幅减少重复代码，提升开发效率； 封装思路可迁移到其他组件（如表单、弹窗），核心是提取通用逻辑、预留扩展入口，让组件既通用又灵活。
