应使用select+data-*属性动态管理枚举值，通过后端返回的字段元数据驱动前端下拉选项，配合全局enumMap配置对象实现一处更新、全端生效，避免硬编码导致维护风险。
用 select + data-* 属性管理枚举值，别硬编码到 JS 里
枚举值频繁变动时，把 ['启用', '禁用'] 写死在 JavaScript 里等于埋雷。真实业务中，后端返回的字段元数据（比如 status 字段的 enum_values）应直接驱动前端下拉选项。HTML 层用 select 配合 data-enum 或 data-field-type 标记字段类型，再由 JS 动态渲染选项：
<select name="status" data-field-type="status"><option value="">-- 请选择 --</option></select>
JS 获取 data-field-type 后查配置表（如全局 window.enumMap = { status: [{value: 1, label: '启用'}, {value: 0, label: '禁用'}] }），再填充 option。这样改一个枚举，只需更新配置对象，不用动 HTML 或 JS 逻辑。
表格行内编辑枚举字段时，contenteditable 不可靠，优先用 select 覆盖
想让数据字典表格支持点击单元格弹出下拉选值？别用 contenteditable="true" 配合 onblur 提交——它无法阻止非法输入、不兼容键盘导航、移动端焦点混乱。正确做法是：点击单元格时，用 JS 插入一个临时 select 覆盖原内容，失去焦点或回车时提交，再还原为只读文本。
- 覆盖层
select的position: absolute需对齐原单元格位置（用getBoundingClientRect()） - 必须监听
Escape键取消编辑，否则用户无法中止 - 提交后立即移除
select，避免重复插入导致内存泄漏
fetch 加载字典数据失败时，select 显示空选项比显示错误提示更安全
数据字典接口挂了，页面上所有下拉框都报“加载失败”？用户会以为功能不可用。实际更稳妥的做法是：初始渲染时先留空 select，接口失败后仍保持空状态，并在对应字段旁加灰色小字“枚举未加载”，而不是弹 Toast 或阻断表单提交。原因有三：
- 多数枚举字段允许空值或有默认 fallback（如后端可接受
null） - 用户可能只编辑非枚举字段，没必要因字典加载失败卡住整个页面
- 重试机制应由按钮触发（如“刷新枚举”），而非自动轮询——避免压垮本就故障的字典服务
导出 Excel 时枚举值显示中文而非数字，关键在后端不传原始码值
前端表格显示“启用”，但导出 Excel 却是 1？问题常出在导出逻辑直接取了 row.status 字段原始值。解决方式分两层：
- 前端导出前，遍历字段名匹配
enumMap，用enumMap[fieldName].find(i => i.value === row[fieldName])?.label替换显示值 - 更推荐后端统一处理：导出接口返回的 JSON 中，枚举字段带
status_label: "启用"字段，前端直接取该字段，避免前后端枚举映射不一致 - 注意时间戳等其他字段别被误替换——必须严格按字段名白名单处理
真正难的不是实现，是确保前后端枚举定义同步。建议把枚举配置抽成独立 JSON 文件，构建时注入前后端，而不是靠人肉维护两份列表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
