表格魔法师 · 让合并变得简单！ 支持4大主流UI库的智能表格合并解决方案，无需手写复杂的合并逻辑，可视化配置，一键生成代码。
🎯 多UI库全覆盖 - 支持 Element Plus、Ant Design Vue、Naive UI、Vuetify
📊 三种合并模式 - 行合并、列合并、混合合并
🎨 实时预览 - 配置即刻可见，所见即所得
💻 代码生成 - Vue2/3 代码一键生成，开箱即用
📄 多格式导入 - JSON、CSV、Excel 智能解析
⚙️ 高级配置 - 自定义规则、范围控制、条件筛选
git clone https://github.com/pdxjie/el-table-span-method.git
cd table-wiz
npm install
npm run dev浏览器访问 http://localhost:5173 立即开始体验！
- 📂 导入数据 - 拖拽文件或使用示例数据
- 🎯 选择UI库 - 顶部切换目标UI组件库
- ⚙️ 配置合并 - 设置合并类型和列
- 👀 实时预览 - 查看合并效果
- 💻 生成代码 - 一键生成可用代码
| UI库 | 版本 | 合并实现 | 特色功能 |
|---|---|---|---|
| Element Plus | 2.x | span-method |
🎯 默认推荐，功能最全 |
| Ant Design Vue | 4.x | customCell |
🏢 企业级，成熟稳定 |
| Naive UI | 2.x | rowSpan/colSpan |
🪶 轻量现代，Vue3原生 |
| Vuetify | 3.x | 自定义表格 | 🎨 Material Design |
- 🔄 实时切换 - 顶部选择器即时切换
- 📊 独立预览 - 每个UI库独立渲染
- 💾 配置保持 - 切换UI库时配置自动保持
- 🎨 统一样式 - 保持一致的视觉体验
将相同值的连续行合并为一个单元格
// 示例：按部门合并员工数据
{ department: '技术部', name: '张三' }
{ department: '技术部', name: '李四' } // 合并显示
{ department: '市场部', name: '王五' }将相关列在表头层面进行分组合并
// 示例：地理信息列分组
columns: [
{
label: '地理信息', // 合并后的表头
children: [
{ prop: 'region', label: '地区' },
{ prop: 'province', label: '省份' },
{ prop: 'city', label: '城市' }
]
}
]同时进行表头列分组和数据行合并
// 表头：联系方式分组 + 数据：按部门行合并
// 实现复杂的多维度表格布局点击测试卡片，自动加载对应数据并配置合并参数：
- 📊 行合并示例 - 部门员工数据
- 📋 列合并示例 - 区域地理数据
- 🔄 混合合并示例 - 产品销售数据
- JSON格式 - 完美支持复杂数据结构
- CSV格式 - 自动识别分隔符和编码
- Excel格式 - 支持 .xlsx/.xls，多工作表
- 表头识别 - 自动分析并建议最佳表头行
- 预览对话框 - A、B、C列清晰展示原始数据
- 多方案选择 - 提供多种解析方案供选择
- 实时预览 - 选择后立即预览解析结果
- ✅ 相同值合并 - 完全相同的值才合并
- 🧩 自定义规则 - JavaScript表达式实现复杂逻辑
// 忽略大小写 value1.toLowerCase() === value2.toLowerCase() // 数值差小于100 Math.abs(value1 - value2) < 100 // 包含关系 value1.includes(value2) || value2.includes(value1)
- 起始行设置 - 从第N行开始合并
- 结束行设置 - 到第N行结束合并
- 数字输入框 - 带增减按钮，操作便捷
- 实时验证 - 输入范围自动验证
- 表格边框 - 控制边框显示/隐藏
- 斑马纹效果 - 控制行背景交替色
- 响应式适配 - 自动适配不同屏幕尺寸
- 动态列宽 - 根据内容自动调整
- 水平滚动 - 超过6列自动启用滚动
- 智能提示 - 显示行数和滚动提示
- 合并高亮 - 合并单元格特殊标识
- 刷新按钮 - 手动刷新预览
- 悬停效果 - 鼠标悬停高亮
- 响应式 - 完美适配移动端
- 状态提示 - 底部显示合并信息
- ⚡ Vue 3 - Composition API +
<script setup> - 🔄 Vue 2 - Options API + data/methods
- 🔀 一键切换 - 版本间自由切换
- 语法高亮 - JavaScript/Vue完美高亮
- 智能提示 - 代码补全和错误检测
- 代码折叠 - 大文件浏览轻松
- 行号显示 - 精确定位代码
- 一键复制 - 复制到剪贴板
- 文件下载 - 直接下载.vue文件
- 完整可用 - 生成代码开箱即用
- 智能注释 - 关键逻辑清晰注释
- Vue 3 - Composition API最新特性
- Element Plus - 企业级UI组件库
- Vite - 下一代构建工具
- JavaScript/ES6+ - 现代JavaScript特性
- 智能合并引擎 - 支持三种合并模式
- 自定义规则引擎 - 安全的表达式执行
- 文件解析引擎 - 多格式智能解析
- 适配器模式 - 统一多UI库接口
src/
├── components/ # 核心组件
│ ├── ConfigPanel.vue # 配置面板
│ ├── UniversalTablePreview.vue # 表格预览
│ ├── CodeGenerator.vue # 代码生成
│ ├── UILibrarySelector.vue # UI库选择器
│ ├── ExcelHeaderSelector.vue # Excel表头选择
│ └── AdvancedRuleEditor.vue # 高级规则编辑器
├── utils/ # 工具函数
│ ├── spanMethod.js # 合并算法
│ └── fileProcessor.js # 文件处理
├── adapters/ # UI库适配器
│ └── UILibraryManager.js # 统一适配管理
└── App.vue # 主应用
- 财务报表 - 按部门/月份合并
- 销售统计 - 按地区/产品合并
- 员工报告 - 按职级/部门合并
- 用户统计 - 按来源/时间合并
- 产品分析 - 按分类/状态合并
- 运营数据 - 按渠道/效果合并
- 排班表 - 按班次/员工合并
- 课程表 - 按时间/教室合并
- 会议安排 - 按时间/部门合并
- 零学习成本 - 拖拽即用，无需文档
- 所见即所得 - 配置立即预览
- 错误友好 - 清晰的错误提示
- 跨平台一致 - 统一使用体验
- 代码可用 - 生成代码直接可用
- 规范输出 - 符合Vue最佳实践
- 易于扩展 - 清晰的架构设计
- 性能优化 - 大数据场景优化
Q: 支持多大的文件？
A: 最大支持10MB文件，Excel建议不超过10万行以确保最佳性能。
Q: 生成的代码可以直接使用吗？
A: 完全可以！代码包含完整的Vue组件结构，替换示例数据即可使用。
Q: 自定义规则支持哪些语法？
A: 支持所有标准JavaScript表达式，包括字符串方法、数学运算、正则表达式等。
Q: 为什么选择这四个UI库？
A: 这四个是Vue生态中最主流和稳定的UI库，覆盖了大部分开发场景。
Q: 移动端可以正常使用吗？
A: 完全支持！响应式设计确保在手机、平板上都有良好体验。
# 克隆项目
git clone https://github.com/pdxjie/el-table-span-method.git
# 安装依赖
npm install
# 启动开发
npm run dev
# 构建生产
npm run build- 代码风格 - ESLint + Prettier
- 提交规范 - Conventional Commits
- 组件规范 - Vue单文件组件
- 文档规范 - JSDoc注释
别再为复杂的表格合并逻辑烦恼了！
- 🚀 立即体验 -
git clone & npm run dev - 🐛 问题反馈 - 提交Issue或PR
- ⭐ 点亮星标 - 觉得好用记得Star！
- 📢 分享推荐 - 让更多人知道这个工具
让表格合并变得简单，让开发效率翻倍！ ✨