一、背景
前几天接了一个前端面试题，需求是：根据三张设计图，实现一个电机参数配置表格。要求：
· 用Vue2（版本2.6.14） · 完全按照设计图还原（边框、颜色、行高、字体） · 数据要能保存（刷新后不丢失） · 下拉框要有内容，修改一个数据保存一次
设计图很细，但没给接口、没给数据库、没给任何说明——只有三张截图。
二、实现过程
-
先搭架子 用Vue2 + HTML/CSS，先把表格结构画出来。设计图里有几十个字段，分成“额定数据”“定子冲片”“磁极冲片”“定子绕组”“转子绕组”“各种牌号”几大块。我用分组，每块独立，方便维护。
-
按设计图调样式
· 边框：最外层深灰（#dcdcdc），内里浅灰竖线（#eeeeee），最后一条边强制深灰 · 行高：28px · 背景色：表头灰（#f7f7f7），内容区白 · 输入框：无边框、透明背景、占位符灰色（#adadad）
最难的是“内部无横线，区块有分割”——我用了border-collapse和tbody的底部边框才调对。
-
加数据保存 用localStorage，深度监听formData，任何修改自动保存。这样刷新后数据还在，用户不用重新填。
-
处理下拉框 设计图里的下拉框（如“磁极线圈”“接线”“定子冲片”），原生select太丑，我自己用div模拟了一个：
· 用@click控制展开/收起 · 用v-for渲染选项 · 加了一个小箭头（纯CSS画的） · 鼠标移出加延迟关闭（200ms），防止点不到选项
- 按反馈修改 发过去后，对方给了两张修改图，要求：
· 下拉框要能手动拉宽（加了resize: horizontal） · 文字过长时用省略号（text-overflow: ellipsis） · 去掉输入框默认的加减图标（用CSS隐藏） · 箭头和文字垂直居中（调了transform: translateY(-25%)）
三、遇到的坑
坑1：下拉框一移开就消失 一开始用@mouseleave直接关闭，结果鼠标从按钮移到选项时，面板就关了。后来加了200ms延迟，移回来就取消关闭，才解决。
坑2：边框死活对不上 设计图里“内部无横线，区块有分割”，我一开始用border直接写，结果乱成一团。最后用tbody加底部边框，内部用border-left和border-right，才还原。
坑3：文字过长挤爆 表格窄，文字一长就换行，设计图要求“最后一个字符用...省略号”。用white-space: nowrap + overflow: hidden + text-overflow: ellipsis搞定。
四、最终效果
· 在线预览：interview-0315.netlify.app/ · 代码结构：一个HTML文件，Vue2 + 原生CSS，无后端，数据存localStorage · 附：本文完整代码放在最后
五、一点感想
这次面试题虽然最后没成，但让我学会了：
· 怎么从模糊需求里拆任务 · 怎么按反馈快速修改 · 怎么在没有后端的情况下用localStorage模拟交互
那个表格也成了我作品集里最“实操”的一个项目——能证明“我能按设计图干活，也能按反馈改东西”。
六、关于我
前端开发，Vue2/Vue3都能写，做过完整项目（网站、AR、表格），正在找远程工作。如果你有前端需求或机会，欢迎联系。
· 附：本文展示页面与完整代码放在最后(code.juejin.cn/pen/7618871…)
