我最近用 AI 辅助写了一个类似飞书多维表格的纯前端工具没有后端、不依赖服务器打开浏览器就能跑。数据全部存在本地刷新不丢平时用来管理读书清单、项目进度、兴趣记录这类轻量数据比在线表格更轻也比 Excel 更适合结构化数据管理。这篇文章把整个项目的来龙去脉讲清楚从为什么做、核心功能怎么拆、纯前端方案怎么选到 AI 辅助开发的完整过程以及我在实际落地时踩过的坑和最终的解决方案。内容上会更偏向“方法论 可复现代码片段”希望能给想用 AI 做工具、以及想自己搞一个多维表格平替版的朋友一些参考。1. 为什么自己造一个多维表格平替版1.1 真实使用场景与传统表格的痛点我在实际工作中经常需要维护一些结构化数据比如个人读书清单书名、作者、分类、评分、阅读状态、是否借出。项目任务表任务名、负责人、优先级、截止日期、完成状态。家庭物品登记物品名称、存放位置、购买日期、保修期。这类数据如果用 Excel 管理文件多了之后容易混乱共享也不方便用在线多维表格平台虽然能力强但需要注册账号、登录网页数据上传到云端有些内部资料不好传而且对只想快速建个表的人来说功能太多了页面各种入口和弹窗反而影响效率。所以我想要一个足够“轻”的东西不需要安装不需要登录把 HTML 文件发给别人别人双击打开也能用数据不要离开本机隐私性有保障。1.2 纯前端实现的价值零部署、私密、跨平台纯前端方案天然满足这个需求。把整个应用做成一个 HTML 文件里面嵌入 JavaScript 和 CSS浏览器打开直接解析不需要任何本地环境。好处有几个零部署不用装 Node 环境不用配服务器双击即用这对非技术朋友特别友好。数据隐私数据只存浏览器本地不经过任何第三方服务器适合个人笔记、敏感信息登记。跨平台Windows、macOS、Linux甚至手机平板上的浏览器都能打开同一份文件。文件放在网盘或局域网共享里任何设备随开随用。可修改因为能看到源码想加一个字段类型、改一个按钮文案只要会一点前端基础都能改不会也没关系让 AI 帮你改。1.3 为什么选择用 AI 帮忙写代码我自己写过不少前端项目但用一个周末从零写一个具备多维表格核心能力的工具工作量并不小。拆开来看要处理表格渲染、单元格编辑、筛选排序、公式计算、数据持久化、多表管理、视图管理这些模块如果纯手写至少要上千行代码里面还藏着一堆边界情况。AI 辅助最大的价值不是直接把功能全部一键生成而是把“样板代码”和“重复劳动”包掉。比如基础的表格布局、读写 localStorage、增删改查逻辑这类写起来不难但很耗时间的部分AI 可以在几秒内生成我只需要把重点放在功能设计、边界情况确认和 AI 生成的逻辑校验上。我尝试了用 AI 分模块生成、再人工合进一个项目的做法事实证明效率确实高。下面我会把整个开发过程完整复盘包括提示词示例、架构思考、关键代码段和调错记录。2. 多维表格的核心功能与设计拆解2.1 数据模型表、字段、记录、视图多维表格不是普通二维表格它最大的特点是围绕“数据表”做了结构化管理。简化后的核心模型是一个工作区包含多张表。每张表包含多个字段列和多条记录行。每条记录是一个对象对象里的 key 是字段 IDvalue 是字段值。视图是表的一种“观察角度”记录了筛选条件、排序规则、分组字段等配置不实际修改数据。用 TypeScript 风格描述出来大概是interface Field { id: string; name: string; type: text | number | date | select | multiSelect | formula; options?: string[]; // 单/多选的可选内容 formula?: string; // 公式字段的表达式 } interface Table { id: string; name: string; fields: Field[]; records: Recordstring, any[]; view: { filters: Filter[]; sortRules: SortRule[]; groupBy?: string; }; }这个模型是整套应用的基石。AI 生成的代码如果一开始数据模型设计错了后面所有功能都会跟着别扭。所以我在第一次给 AI 的提示词里就把这个数据结构明确写了进去。2.2 字段类型不仅仅是文本和数字多维表格最实用的部分就是字段类型。我在平替版里实现了这些字段类型存储值单元格交互典型用途文本string输入框名称、描述数字number数字输入框数量、评分日期string日期选择器截止日期、购买日期单选string下拉选择优先级、状态多选string[]标签式多选分类、标签公式动态计算只读显示求和、平均值、计数单选和多选字段的 options 可以预设也可以从已录入的数据里智能去重自动补全体验上更接近飞书。公式字段比较特殊它不存储值而是根据同一记录里其他字段的值动态计算比如“总分 语文 数学 英语”或者“完成率 已完成任务数 / 总任务数 × 100%”。2.3 视图操作筛选、排序、分组多维表格不可能只是往表格里填数据关键在查看和分析。我实现的视图操作包括筛选支持“等于/不等于/包含/不包含/大于/小于/为空/不为空”等条件多个条件之间支持且和或的关系。排序按任意字段升序或降序排序支持多个排序规则叠加。分组按单选、文本等字段分组相同值的记录聚合到同一组下组内还能继续排序。这些操作全部在前端本地完成每次变更视图配置后表格即时重新渲染。因为没有后端所有计算都发生在浏览器里速度完全够用。3. 技术选型与总体架构3.1 为什么用 Vue 3 Element Plus 的单 HTML 方案要满足“浏览器就能跑”最直接的方案就是单个 HTML 文件引入 CDN 依赖。我选了 Vue 3 和 Element Plus原因有几个响应式开发效率高表格数据、筛选条件、编辑状态都是典型的状态驱动场景Vue 的响应式系统可以减少大量手动 DOM 操作。组件化拆分方便表格、筛选面板、字段配置弹窗、设置菜单每个模块都可以拆成组件AI 生成代码时也更容易定向修改。Element Plus 自带常用组件日期选择器、下拉选择、弹窗、输入框、消息提示都有现成组件省去自己写 UI 的耗时。最终的 HTML 文件基本结构是这样的!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title轻量多维表格/title link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/element-plus/dist/index.css / script srchttps://cdn.jsdelivr.net/npm/vue3/dist/vue.global.prod.js/script script srchttps://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js/script /head body div idapp/div script srcapp.js/script /body /html如果在意 CDN 挂掉可以直接把 Vue、Element Plus 的 js/css 文件下载到本地与 HTML 同目录引用这样整个目录拷到别人电脑上也能离线运行。3.2 项目模块划分有了 Vue 3 的响应式系统整个应用可以按下面几层组织数据层负责读写 localStorage对外暴露 load、save、addTable、deleteTable、saveTableData 等方法。数据层设计成独立模块后续要换成 IndexedDB 也很容易。状态层在 app 根实例里维护一个响应式对象 state包含 tables、currentTableId、currentViewId 等。所有组件共享这个 state数据修改统一走方法调用避免散落各处导致状态不同步。组件层包括 TableSidebar表列表、TableView表格主体、FieldConfigDialog字段设置、FilterPanel筛选面板、FormulaHelper公式辅助输入等组件。工具层包括 formulaEvaluator公式解析器、dataUtils排序筛选分组逻辑、fileUtils导入导出 JSON/CSV。这种分层方式对 AI 辅助开发特别友好。每次让 AI 改功能时我只需要说“在数据层的 xxx 函数里增加一个方法”AI 就能精准定位上下文。3.3 本地存储方案localStorage 与 IndexedDB 怎么选localStorage 用起来最简单同步读写容量约 5MB。对于个人笔记、任务管理这类场景数据量通常在几百 KB 以内足够用。但也需要注意几个问题localStorage 只能存字符串所以每次保存都要 JSON.stringify读取要 JSON.parse。隐私模式下 localStorage 可能不可用或重启失效。5MB 是 CDN 域名维度限制不同域名之间隔离。如果数据量超过 5MB可以直接替换成 IndexedDB。IndexedDB 容量大得多支持异步读写和索引查询适合做复杂查询。但 API 更繁琐需要写不少样板代码。我在这次实现中先用了 localStorage后续 p想法是封装一个 StorageEngine 对象只在 save/load 内部做切换不动上层业务代码。4. 核心模块的 AI 辅助实现过程4.1 第一轮提示词定义全局与基础骨架我给 AI 的第一轮提示词把需求、技术栈、数据结构、UI 布局都写清楚目标是生成一个能跑起来的基础框架。请生成一个单 HTML 文件的多维表格工具使用 Vue 3 Element Plus通过 CDN 引入实现以下功能左侧显示多张表的列表支持新建表、删除表、切换表。右侧为表格区域展示当前表的字段列数据和记录数据。支持新增记录、删除记录、编辑单元格。字段支持类型文本、数字、日期、单选、多选。数据保存到 localStorage每次修改后自动保存。界面采用中文样式简洁整体参考飞书多维表格。 数据结构 table { id, name, fields: [{id, name, type, options}], records: [{fieldId: value}] } 请直接输出完整 HTML 代码。这一轮 AI 会生成一个可运行的基础版本。不过通常会有问题比如 CDN 引用方式不对、Element Plus 的中文语言包没引入、保存逻辑没做防抖等等。这些我放在后续迭代里调。4.2 迭代式开发让 AI 逐步完善功能基础框架跑通之后我不会一口气让 AI 把所有功能做完而是按模块逐步推进。每轮只改一两个点方便测试和回滚。实际开发顺序是第一轮完成表结构管理。新建表时自动生成一列“标题”字段默认加三行空记录。表的增删改查要非常顺畅。第二轮完成单元格编辑。不同类型的字段点击后出现不同编辑器文本是输入框数字是数字框日期是日期选择器单选是下拉框多选是标签选择器。编辑完成后失焦或回车确认。第三轮完成筛选与排序。在工具栏加入“筛选”“排序”按钮点击后弹出配置面板配置项实时应用到表格数据。第四轮完成公式字段。支持 SUM、AVG、COUNT、IF 函数可选择同一行内的数字字段参与计算。第五轮优化 UI 细节包括列宽拖拽、行 hover 高亮、表格右键菜单、空状态展示。这里每轮 AI 生成的代码都不是孤立的我需要把当前完整代码贴回上下文然后要求在指定位置修改。比如这是在之前代码基础上修改的项目。目前表格是正常显示和编辑的我现在需要在工具栏加一个“筛选”按钮点击后弹出筛选面板需求如下支持添加多个筛选条件条件之间是并且关系。每个条件选择字段、比较方式、输入值。点击“应用”后表格数据立即过滤点击“重置”恢复。请只修改 HTML 和 JavaScript 部分CSS 尽量沿用现有类名。 完整代码粘贴...这样迭代效率很高基本可以做到“半天出一个完整工具”。4.3 几个关键代码片段详解数据响应式中心App 启动时初始化 state 并监听变化保存const state Vue.reactive({ tables: [], currentTableId: null, }); function save() { localStorage.setItem(light-multi-table, JSON.stringify(state.tables)); } function load() { const raw localStorage.getItem(light-multi-table); state.tables raw ? JSON.parse(raw) : []; } // 监听所有状态变更防抖保存 Vue.watch( () JSON.parse(JSON.stringify(state.tables)), () { clearTimeout(timer); timer setTimeout(save, 300); }, { deep: true } );这里用了防抖避免每次单元格输入都同步写 localStorage。注意Vue.watch需要把对象深拷贝一下作为监听源否则修改数组内部的字段可能不会触发监听——这是我在实际使用中踩过的坑后面会详细说。表格单元格渲染利用 Vue 的component :is动态切换字段编辑器template v-forfield in table.fields el-input v-iffield.type text v-modelrecord[field.id] sizesmall / el-input-number v-else-iffield.type number v-modelrecord[field.id] sizesmall :controlsfalse / el-date-picker v-else-iffield.type date v-modelrecord[field.id] typedate sizesmall value-formatYYYY-MM-DD / el-select v-else-iffield.type select v-modelrecord[field.id] sizesmall el-option v-foropt in field.options :keyopt :labelopt :valueopt / /el-select /template这段代码是 AI 生成的但我在接口细节上做了调整。比如日期选择器必须加value-formatYYYY-MM-DD否则双向绑定的值是 Date 对象localStorage 序列化后会变成字符串导致回显异常。公式解析器这是整个项目里 AI 生成得比较“曲折”的部分。我先是让 AI 写一个简单表达式解析器支持加减乘除和括号后来扩展函数调用时发现优先级处理有问题。最终实现是通过“分词 - 转后缀表达式 - 求值”的经典方案省略大量过程后核心是function tokenize(expr) { return expr.match(/\d(\.\d)?|[a-zA-Z_][a-zA-Z0-9_]*|[\-*/()]/g) || []; } function toRPN(tokens) { // 调度场算法将中缀转后缀 } function evaluate(rpn, ctx) { const stack []; for (const token of rpn) { if (isNumber(token)) stack.push(Number(token)); else if (ctx token in ctx) stack.push(ctx[token]); else if (token ) stack.push(stack.pop() stack.pop()); // ... 运算符处理 } return stack[0]; }AI 一开始给的是直接递归求值但在处理“括号内调用函数”时逻辑混乱。后来我给了它一个更明确的算法描述让它照着调度场算法实现测试用例才全通过。这个过程也印证了我一直强调的观点AI 能帮你写代码但怎么设计算法还是要自己拿主意。4.4 AI 生成代码常见的几个坑用 AI 写这种小型完整应用我觉得有几类问题重复出现率很高提前知道了能少走很多弯路。版本不匹配AI 默认生成 Element Plus 2.3 或 2.4 的 API但引入的 CDN 版本可能是 2.2组件 prop 或事件名称对不上导致点击没反应或者组件不渲染。解决方法是把 CDN 版本固定好并且在提示词里注明“使用 Element Plus 2.4.x”。对象引用污染AI 习惯直接修改 state.tables 里的对象比如设置筛选条件时直接把当前 view 的引用给了临时变量修改时改了原始数据。对策是所有 UI 弹窗里的临时状态用 computed 或者深拷贝维护等点击“应用”再写回。生成功能冗余让 AI 新增一个功能时它可能会“顺手”优化其他部分导致改动范围失控。所以我通常会在提示词里强调“请只修改与需求相关的部分不要重构其他代码”。异步时序坑如果表格数据量较大AI 可能会用 forEach await 来做逐行保存容易造成写入乱序。我一般要求所有存储操作统一走中央的 save 方法避免散落。5. 数据持久化、导入导出与多表管理5.1 保存机制的防呆设计自动保存虽然方便但也容易带来问题如果用户打开多个标签页A 页面改完数据B 页面又保存会发生覆盖。我的做法是启动时检查 localStorage 里是否已有数据有则提示用户“检测到已有数据是否覆盖当前页面”降低误操作风险。另外在beforeunload事件里强制同步保存一次处理用户关闭标签页时最后一刻的数据变化window.addEventListener(beforeunload, () { localStorage.setItem(light-multi-table, JSON.stringify(state.tables)); });5.2 JSON 导入导出备份必须做浏览器本地存储再多也有被清除的风险尤其是浏览器升级、清理缓存、换设备的时候。所以我在工具栏加了“导出数据”和“导入数据”按钮。导出是把整个工作区的所有表结构、记录、视图配置打包成一个 JSON 文件下载导入时严格校验字段结构避免非法数据打崩页面。导出 JSON 的核心代码很直白function exportJson() { const blob new Blob([JSON.stringify(state.tables, null, 2)], { type: application/json, }); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download 多维表格备份_${new Date().toISOString().slice(0, 10)}.json; a.click(); URL.revokeObjectURL(url); }5.3 CSV 导出给 Excel 用有时候我需要把表格发给同事对方用 Excel 或 WPS 打开。CSV 导出就用 Table 对象拼逗号分隔文本function exportCsv(table) { const headers table.fields.map((f) f.name).join(,); const rows table.records.map((r) table.fields.map((f) r[f.id] ?? ).join(,) ); const csv \uFEFF [headers, ...rows].join(\n); const blob new Blob([csv], { type: text/csv;charsetutf-8; }); // 下载逻辑同 JSON }开头加\uFEFFBOM很重要否则 Windows 下 Excel 打开 CSV 中文会乱码。5.4 多表管理与视图配置保存左侧表列表支持新建、复制、删除表。每个表内部可以创建多个视图视图保存的是独立配置。切换视图时数据不变表格展示随之变化。视图配置的存储我已经合进了 Table 对象每个 table 下面有一个 views 数组默认至少有一个“全部”视图。视图切换时组件读取当前视图的 filters 和 sortRules再做一次过滤排序计算。这段逻辑不复杂但视图配置如果跟记录数据混在一个对象里JSON 导出时要筛选导出避免把视图配置也一并发给别人。我在导出时只导出tables里的fields和records视图是私有配置不导出。6. 常见问题与排查方案6.1 刷新后数据什么都没了这个遇到的人最多原因基本是浏览器存储被清理或者 localStorage 写入失败。排查思路打开浏览器 DevTools - Application - Local Storage看对应域名下有没有 key 为light-multi-table的数据。如果没有检查代码里是否在保存时抛异常比如隐私模式下 localStorage 写入会报 SecurityError要用 try/catch 捕获。如果数据存在但页面读出来是空的考虑代码里的 key 不一致或者数据结构升级导致解析失败。我的建议是开发阶段把导出 JSON 按钮当成开发工具每次改动前先导出备份避免开发中改坏数据。6.2 页面白屏控制台报错白屏最常见原因是 CDN 加载失败尤其在国内某些网络环境下访问 jsdelivr 可能超时。解决方式把 Vue、Element Plus 的库下载到本地与 HTML 同级放lib目录。同时保留 CDN 地址作为 fallback但要注意引用的顺序和版本一致性。在页面最外层加一个全局错误捕获输出错误信息到页面避免白屏后完全不知道发生了什么。6.3 大数据量卡顿怎么优化几百条记录时完全不卡但上到几千条刷新排序就会有明显延迟。原因是每次视图刷新都对全量数据做 JSON 序列化和 DOM 重建。两个有效优化用计算属性缓存排序筛选结果只有关联数据变化时才重新计算。把表格渲染改成“虚拟滚动”只渲染可视区域的行其他行用占位高度替代。Element Plus 的表格自带虚拟滚动但和自研单元格编辑器整合要额外调试。我这版保持了简单限制单表最大记录数为 5000 条超过时弹出提示。6.4 公式字段不更新或计算错误公式字段需要在表格初始化时对每条记录算一次之后任一参与运算的字段变化时重算。如果公式没有更新多半是参与字段没有被 Vue 的依赖追踪捕获。我的做法是让公式字段的计算函数用computed实现而不是简单的方法调用这样 Vue 会自动追踪依赖formulaValue(record) { // 在 computed 里读取 record 相关字段 return this.evaluateFormula(record); }如果仍然不更新检查公式里用了空值或者字符串比如未填数字的字段参与SUM会被当成0IF判断空字符串的逻辑要定义清楚。6.5 跨浏览器兼容问题速查现象原因解决方案日期选择器显示英文Element Plus 语言包未设置引入 zh-cn 语言包并设置 localeCSS 样式错乱版本差异固定 CDN 版本避免使用 latest数字输入框输入不了负数Element Plus 默认 min0手动设置 :minnull 或允许负数右键菜单无响应浏览器安全限制改用点击图标方式呼出菜单不用 contextmenu 事件这些小问题单独看都不难但在没有后端的环境里所有异常都得靠浏览器控制台和用户反馈才能定位。所以我在页面右下角加了一个“反馈/日志”按钮点击后把最近的 localStorage 状态片段复制到剪贴板方便远程协助排查。我自己做完这个项目以后最大的感受是AI 确实把写代码的门槛降了下来但能不能做出真正好用的工具关键还是在于对业务需求和数据结构的理解。纯前端项目没有后端所有逻辑都摊在明面上反而逼着我把数据流设计想清楚。如果你也想做一个类似的本地工具建议先从一张表、三五个字段开始跑通了再加公式、筛选、分组这些进阶功能。最后分享一个小技巧让 AI 改代码时不要只说“帮我优化一下”而是把报错信息、期望效果、相关代码片段三样东西都给齐。这样 AI 的修改准率会大幅度提升你也不用在几版代码之间来回试错。希望这篇复盘能给你一点启发也欢迎你在自己的项目里试试纯前端 AI 辅助的开发方式。
用AI辅助开发纯前端多维表格：零后端、本地存储的工具实践
我最近用 AI 辅助写了一个类似飞书多维表格的纯前端工具没有后端、不依赖服务器打开浏览器就能跑。数据全部存在本地刷新不丢平时用来管理读书清单、项目进度、兴趣记录这类轻量数据比在线表格更轻也比 Excel 更适合结构化数据管理。这篇文章把整个项目的来龙去脉讲清楚从为什么做、核心功能怎么拆、纯前端方案怎么选到 AI 辅助开发的完整过程以及我在实际落地时踩过的坑和最终的解决方案。内容上会更偏向“方法论 可复现代码片段”希望能给想用 AI 做工具、以及想自己搞一个多维表格平替版的朋友一些参考。1. 为什么自己造一个多维表格平替版1.1 真实使用场景与传统表格的痛点我在实际工作中经常需要维护一些结构化数据比如个人读书清单书名、作者、分类、评分、阅读状态、是否借出。项目任务表任务名、负责人、优先级、截止日期、完成状态。家庭物品登记物品名称、存放位置、购买日期、保修期。这类数据如果用 Excel 管理文件多了之后容易混乱共享也不方便用在线多维表格平台虽然能力强但需要注册账号、登录网页数据上传到云端有些内部资料不好传而且对只想快速建个表的人来说功能太多了页面各种入口和弹窗反而影响效率。所以我想要一个足够“轻”的东西不需要安装不需要登录把 HTML 文件发给别人别人双击打开也能用数据不要离开本机隐私性有保障。1.2 纯前端实现的价值零部署、私密、跨平台纯前端方案天然满足这个需求。把整个应用做成一个 HTML 文件里面嵌入 JavaScript 和 CSS浏览器打开直接解析不需要任何本地环境。好处有几个零部署不用装 Node 环境不用配服务器双击即用这对非技术朋友特别友好。数据隐私数据只存浏览器本地不经过任何第三方服务器适合个人笔记、敏感信息登记。跨平台Windows、macOS、Linux甚至手机平板上的浏览器都能打开同一份文件。文件放在网盘或局域网共享里任何设备随开随用。可修改因为能看到源码想加一个字段类型、改一个按钮文案只要会一点前端基础都能改不会也没关系让 AI 帮你改。1.3 为什么选择用 AI 帮忙写代码我自己写过不少前端项目但用一个周末从零写一个具备多维表格核心能力的工具工作量并不小。拆开来看要处理表格渲染、单元格编辑、筛选排序、公式计算、数据持久化、多表管理、视图管理这些模块如果纯手写至少要上千行代码里面还藏着一堆边界情况。AI 辅助最大的价值不是直接把功能全部一键生成而是把“样板代码”和“重复劳动”包掉。比如基础的表格布局、读写 localStorage、增删改查逻辑这类写起来不难但很耗时间的部分AI 可以在几秒内生成我只需要把重点放在功能设计、边界情况确认和 AI 生成的逻辑校验上。我尝试了用 AI 分模块生成、再人工合进一个项目的做法事实证明效率确实高。下面我会把整个开发过程完整复盘包括提示词示例、架构思考、关键代码段和调错记录。2. 多维表格的核心功能与设计拆解2.1 数据模型表、字段、记录、视图多维表格不是普通二维表格它最大的特点是围绕“数据表”做了结构化管理。简化后的核心模型是一个工作区包含多张表。每张表包含多个字段列和多条记录行。每条记录是一个对象对象里的 key 是字段 IDvalue 是字段值。视图是表的一种“观察角度”记录了筛选条件、排序规则、分组字段等配置不实际修改数据。用 TypeScript 风格描述出来大概是interface Field { id: string; name: string; type: text | number | date | select | multiSelect | formula; options?: string[]; // 单/多选的可选内容 formula?: string; // 公式字段的表达式 } interface Table { id: string; name: string; fields: Field[]; records: Recordstring, any[]; view: { filters: Filter[]; sortRules: SortRule[]; groupBy?: string; }; }这个模型是整套应用的基石。AI 生成的代码如果一开始数据模型设计错了后面所有功能都会跟着别扭。所以我在第一次给 AI 的提示词里就把这个数据结构明确写了进去。2.2 字段类型不仅仅是文本和数字多维表格最实用的部分就是字段类型。我在平替版里实现了这些字段类型存储值单元格交互典型用途文本string输入框名称、描述数字number数字输入框数量、评分日期string日期选择器截止日期、购买日期单选string下拉选择优先级、状态多选string[]标签式多选分类、标签公式动态计算只读显示求和、平均值、计数单选和多选字段的 options 可以预设也可以从已录入的数据里智能去重自动补全体验上更接近飞书。公式字段比较特殊它不存储值而是根据同一记录里其他字段的值动态计算比如“总分 语文 数学 英语”或者“完成率 已完成任务数 / 总任务数 × 100%”。2.3 视图操作筛选、排序、分组多维表格不可能只是往表格里填数据关键在查看和分析。我实现的视图操作包括筛选支持“等于/不等于/包含/不包含/大于/小于/为空/不为空”等条件多个条件之间支持且和或的关系。排序按任意字段升序或降序排序支持多个排序规则叠加。分组按单选、文本等字段分组相同值的记录聚合到同一组下组内还能继续排序。这些操作全部在前端本地完成每次变更视图配置后表格即时重新渲染。因为没有后端所有计算都发生在浏览器里速度完全够用。3. 技术选型与总体架构3.1 为什么用 Vue 3 Element Plus 的单 HTML 方案要满足“浏览器就能跑”最直接的方案就是单个 HTML 文件引入 CDN 依赖。我选了 Vue 3 和 Element Plus原因有几个响应式开发效率高表格数据、筛选条件、编辑状态都是典型的状态驱动场景Vue 的响应式系统可以减少大量手动 DOM 操作。组件化拆分方便表格、筛选面板、字段配置弹窗、设置菜单每个模块都可以拆成组件AI 生成代码时也更容易定向修改。Element Plus 自带常用组件日期选择器、下拉选择、弹窗、输入框、消息提示都有现成组件省去自己写 UI 的耗时。最终的 HTML 文件基本结构是这样的!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title轻量多维表格/title link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/element-plus/dist/index.css / script srchttps://cdn.jsdelivr.net/npm/vue3/dist/vue.global.prod.js/script script srchttps://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js/script /head body div idapp/div script srcapp.js/script /body /html如果在意 CDN 挂掉可以直接把 Vue、Element Plus 的 js/css 文件下载到本地与 HTML 同目录引用这样整个目录拷到别人电脑上也能离线运行。3.2 项目模块划分有了 Vue 3 的响应式系统整个应用可以按下面几层组织数据层负责读写 localStorage对外暴露 load、save、addTable、deleteTable、saveTableData 等方法。数据层设计成独立模块后续要换成 IndexedDB 也很容易。状态层在 app 根实例里维护一个响应式对象 state包含 tables、currentTableId、currentViewId 等。所有组件共享这个 state数据修改统一走方法调用避免散落各处导致状态不同步。组件层包括 TableSidebar表列表、TableView表格主体、FieldConfigDialog字段设置、FilterPanel筛选面板、FormulaHelper公式辅助输入等组件。工具层包括 formulaEvaluator公式解析器、dataUtils排序筛选分组逻辑、fileUtils导入导出 JSON/CSV。这种分层方式对 AI 辅助开发特别友好。每次让 AI 改功能时我只需要说“在数据层的 xxx 函数里增加一个方法”AI 就能精准定位上下文。3.3 本地存储方案localStorage 与 IndexedDB 怎么选localStorage 用起来最简单同步读写容量约 5MB。对于个人笔记、任务管理这类场景数据量通常在几百 KB 以内足够用。但也需要注意几个问题localStorage 只能存字符串所以每次保存都要 JSON.stringify读取要 JSON.parse。隐私模式下 localStorage 可能不可用或重启失效。5MB 是 CDN 域名维度限制不同域名之间隔离。如果数据量超过 5MB可以直接替换成 IndexedDB。IndexedDB 容量大得多支持异步读写和索引查询适合做复杂查询。但 API 更繁琐需要写不少样板代码。我在这次实现中先用了 localStorage后续 p想法是封装一个 StorageEngine 对象只在 save/load 内部做切换不动上层业务代码。4. 核心模块的 AI 辅助实现过程4.1 第一轮提示词定义全局与基础骨架我给 AI 的第一轮提示词把需求、技术栈、数据结构、UI 布局都写清楚目标是生成一个能跑起来的基础框架。请生成一个单 HTML 文件的多维表格工具使用 Vue 3 Element Plus通过 CDN 引入实现以下功能左侧显示多张表的列表支持新建表、删除表、切换表。右侧为表格区域展示当前表的字段列数据和记录数据。支持新增记录、删除记录、编辑单元格。字段支持类型文本、数字、日期、单选、多选。数据保存到 localStorage每次修改后自动保存。界面采用中文样式简洁整体参考飞书多维表格。 数据结构 table { id, name, fields: [{id, name, type, options}], records: [{fieldId: value}] } 请直接输出完整 HTML 代码。这一轮 AI 会生成一个可运行的基础版本。不过通常会有问题比如 CDN 引用方式不对、Element Plus 的中文语言包没引入、保存逻辑没做防抖等等。这些我放在后续迭代里调。4.2 迭代式开发让 AI 逐步完善功能基础框架跑通之后我不会一口气让 AI 把所有功能做完而是按模块逐步推进。每轮只改一两个点方便测试和回滚。实际开发顺序是第一轮完成表结构管理。新建表时自动生成一列“标题”字段默认加三行空记录。表的增删改查要非常顺畅。第二轮完成单元格编辑。不同类型的字段点击后出现不同编辑器文本是输入框数字是数字框日期是日期选择器单选是下拉框多选是标签选择器。编辑完成后失焦或回车确认。第三轮完成筛选与排序。在工具栏加入“筛选”“排序”按钮点击后弹出配置面板配置项实时应用到表格数据。第四轮完成公式字段。支持 SUM、AVG、COUNT、IF 函数可选择同一行内的数字字段参与计算。第五轮优化 UI 细节包括列宽拖拽、行 hover 高亮、表格右键菜单、空状态展示。这里每轮 AI 生成的代码都不是孤立的我需要把当前完整代码贴回上下文然后要求在指定位置修改。比如这是在之前代码基础上修改的项目。目前表格是正常显示和编辑的我现在需要在工具栏加一个“筛选”按钮点击后弹出筛选面板需求如下支持添加多个筛选条件条件之间是并且关系。每个条件选择字段、比较方式、输入值。点击“应用”后表格数据立即过滤点击“重置”恢复。请只修改 HTML 和 JavaScript 部分CSS 尽量沿用现有类名。 完整代码粘贴...这样迭代效率很高基本可以做到“半天出一个完整工具”。4.3 几个关键代码片段详解数据响应式中心App 启动时初始化 state 并监听变化保存const state Vue.reactive({ tables: [], currentTableId: null, }); function save() { localStorage.setItem(light-multi-table, JSON.stringify(state.tables)); } function load() { const raw localStorage.getItem(light-multi-table); state.tables raw ? JSON.parse(raw) : []; } // 监听所有状态变更防抖保存 Vue.watch( () JSON.parse(JSON.stringify(state.tables)), () { clearTimeout(timer); timer setTimeout(save, 300); }, { deep: true } );这里用了防抖避免每次单元格输入都同步写 localStorage。注意Vue.watch需要把对象深拷贝一下作为监听源否则修改数组内部的字段可能不会触发监听——这是我在实际使用中踩过的坑后面会详细说。表格单元格渲染利用 Vue 的component :is动态切换字段编辑器template v-forfield in table.fields el-input v-iffield.type text v-modelrecord[field.id] sizesmall / el-input-number v-else-iffield.type number v-modelrecord[field.id] sizesmall :controlsfalse / el-date-picker v-else-iffield.type date v-modelrecord[field.id] typedate sizesmall value-formatYYYY-MM-DD / el-select v-else-iffield.type select v-modelrecord[field.id] sizesmall el-option v-foropt in field.options :keyopt :labelopt :valueopt / /el-select /template这段代码是 AI 生成的但我在接口细节上做了调整。比如日期选择器必须加value-formatYYYY-MM-DD否则双向绑定的值是 Date 对象localStorage 序列化后会变成字符串导致回显异常。公式解析器这是整个项目里 AI 生成得比较“曲折”的部分。我先是让 AI 写一个简单表达式解析器支持加减乘除和括号后来扩展函数调用时发现优先级处理有问题。最终实现是通过“分词 - 转后缀表达式 - 求值”的经典方案省略大量过程后核心是function tokenize(expr) { return expr.match(/\d(\.\d)?|[a-zA-Z_][a-zA-Z0-9_]*|[\-*/()]/g) || []; } function toRPN(tokens) { // 调度场算法将中缀转后缀 } function evaluate(rpn, ctx) { const stack []; for (const token of rpn) { if (isNumber(token)) stack.push(Number(token)); else if (ctx token in ctx) stack.push(ctx[token]); else if (token ) stack.push(stack.pop() stack.pop()); // ... 运算符处理 } return stack[0]; }AI 一开始给的是直接递归求值但在处理“括号内调用函数”时逻辑混乱。后来我给了它一个更明确的算法描述让它照着调度场算法实现测试用例才全通过。这个过程也印证了我一直强调的观点AI 能帮你写代码但怎么设计算法还是要自己拿主意。4.4 AI 生成代码常见的几个坑用 AI 写这种小型完整应用我觉得有几类问题重复出现率很高提前知道了能少走很多弯路。版本不匹配AI 默认生成 Element Plus 2.3 或 2.4 的 API但引入的 CDN 版本可能是 2.2组件 prop 或事件名称对不上导致点击没反应或者组件不渲染。解决方法是把 CDN 版本固定好并且在提示词里注明“使用 Element Plus 2.4.x”。对象引用污染AI 习惯直接修改 state.tables 里的对象比如设置筛选条件时直接把当前 view 的引用给了临时变量修改时改了原始数据。对策是所有 UI 弹窗里的临时状态用 computed 或者深拷贝维护等点击“应用”再写回。生成功能冗余让 AI 新增一个功能时它可能会“顺手”优化其他部分导致改动范围失控。所以我通常会在提示词里强调“请只修改与需求相关的部分不要重构其他代码”。异步时序坑如果表格数据量较大AI 可能会用 forEach await 来做逐行保存容易造成写入乱序。我一般要求所有存储操作统一走中央的 save 方法避免散落。5. 数据持久化、导入导出与多表管理5.1 保存机制的防呆设计自动保存虽然方便但也容易带来问题如果用户打开多个标签页A 页面改完数据B 页面又保存会发生覆盖。我的做法是启动时检查 localStorage 里是否已有数据有则提示用户“检测到已有数据是否覆盖当前页面”降低误操作风险。另外在beforeunload事件里强制同步保存一次处理用户关闭标签页时最后一刻的数据变化window.addEventListener(beforeunload, () { localStorage.setItem(light-multi-table, JSON.stringify(state.tables)); });5.2 JSON 导入导出备份必须做浏览器本地存储再多也有被清除的风险尤其是浏览器升级、清理缓存、换设备的时候。所以我在工具栏加了“导出数据”和“导入数据”按钮。导出是把整个工作区的所有表结构、记录、视图配置打包成一个 JSON 文件下载导入时严格校验字段结构避免非法数据打崩页面。导出 JSON 的核心代码很直白function exportJson() { const blob new Blob([JSON.stringify(state.tables, null, 2)], { type: application/json, }); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download 多维表格备份_${new Date().toISOString().slice(0, 10)}.json; a.click(); URL.revokeObjectURL(url); }5.3 CSV 导出给 Excel 用有时候我需要把表格发给同事对方用 Excel 或 WPS 打开。CSV 导出就用 Table 对象拼逗号分隔文本function exportCsv(table) { const headers table.fields.map((f) f.name).join(,); const rows table.records.map((r) table.fields.map((f) r[f.id] ?? ).join(,) ); const csv \uFEFF [headers, ...rows].join(\n); const blob new Blob([csv], { type: text/csv;charsetutf-8; }); // 下载逻辑同 JSON }开头加\uFEFFBOM很重要否则 Windows 下 Excel 打开 CSV 中文会乱码。5.4 多表管理与视图配置保存左侧表列表支持新建、复制、删除表。每个表内部可以创建多个视图视图保存的是独立配置。切换视图时数据不变表格展示随之变化。视图配置的存储我已经合进了 Table 对象每个 table 下面有一个 views 数组默认至少有一个“全部”视图。视图切换时组件读取当前视图的 filters 和 sortRules再做一次过滤排序计算。这段逻辑不复杂但视图配置如果跟记录数据混在一个对象里JSON 导出时要筛选导出避免把视图配置也一并发给别人。我在导出时只导出tables里的fields和records视图是私有配置不导出。6. 常见问题与排查方案6.1 刷新后数据什么都没了这个遇到的人最多原因基本是浏览器存储被清理或者 localStorage 写入失败。排查思路打开浏览器 DevTools - Application - Local Storage看对应域名下有没有 key 为light-multi-table的数据。如果没有检查代码里是否在保存时抛异常比如隐私模式下 localStorage 写入会报 SecurityError要用 try/catch 捕获。如果数据存在但页面读出来是空的考虑代码里的 key 不一致或者数据结构升级导致解析失败。我的建议是开发阶段把导出 JSON 按钮当成开发工具每次改动前先导出备份避免开发中改坏数据。6.2 页面白屏控制台报错白屏最常见原因是 CDN 加载失败尤其在国内某些网络环境下访问 jsdelivr 可能超时。解决方式把 Vue、Element Plus 的库下载到本地与 HTML 同级放lib目录。同时保留 CDN 地址作为 fallback但要注意引用的顺序和版本一致性。在页面最外层加一个全局错误捕获输出错误信息到页面避免白屏后完全不知道发生了什么。6.3 大数据量卡顿怎么优化几百条记录时完全不卡但上到几千条刷新排序就会有明显延迟。原因是每次视图刷新都对全量数据做 JSON 序列化和 DOM 重建。两个有效优化用计算属性缓存排序筛选结果只有关联数据变化时才重新计算。把表格渲染改成“虚拟滚动”只渲染可视区域的行其他行用占位高度替代。Element Plus 的表格自带虚拟滚动但和自研单元格编辑器整合要额外调试。我这版保持了简单限制单表最大记录数为 5000 条超过时弹出提示。6.4 公式字段不更新或计算错误公式字段需要在表格初始化时对每条记录算一次之后任一参与运算的字段变化时重算。如果公式没有更新多半是参与字段没有被 Vue 的依赖追踪捕获。我的做法是让公式字段的计算函数用computed实现而不是简单的方法调用这样 Vue 会自动追踪依赖formulaValue(record) { // 在 computed 里读取 record 相关字段 return this.evaluateFormula(record); }如果仍然不更新检查公式里用了空值或者字符串比如未填数字的字段参与SUM会被当成0IF判断空字符串的逻辑要定义清楚。6.5 跨浏览器兼容问题速查现象原因解决方案日期选择器显示英文Element Plus 语言包未设置引入 zh-cn 语言包并设置 localeCSS 样式错乱版本差异固定 CDN 版本避免使用 latest数字输入框输入不了负数Element Plus 默认 min0手动设置 :minnull 或允许负数右键菜单无响应浏览器安全限制改用点击图标方式呼出菜单不用 contextmenu 事件这些小问题单独看都不难但在没有后端的环境里所有异常都得靠浏览器控制台和用户反馈才能定位。所以我在页面右下角加了一个“反馈/日志”按钮点击后把最近的 localStorage 状态片段复制到剪贴板方便远程协助排查。我自己做完这个项目以后最大的感受是AI 确实把写代码的门槛降了下来但能不能做出真正好用的工具关键还是在于对业务需求和数据结构的理解。纯前端项目没有后端所有逻辑都摊在明面上反而逼着我把数据流设计想清楚。如果你也想做一个类似的本地工具建议先从一张表、三五个字段开始跑通了再加公式、筛选、分组这些进阶功能。最后分享一个小技巧让 AI 改代码时不要只说“帮我优化一下”而是把报错信息、期望效果、相关代码片段三样东西都给齐。这样 AI 的修改准率会大幅度提升你也不用在几版代码之间来回试错。希望这篇复盘能给你一点启发也欢迎你在自己的项目里试试纯前端 AI 辅助的开发方式。
