Vue 3 表格单元格动态编辑需用二维 ref 状态（rowIndex + field）精准控制，v-if 切换渲染，blur/enter 退出并自动聚焦，嵌套表单校验时 prop 须为 ${rowIndex}.field。

Vue 3 中处理表格内嵌单元格的动态编辑，核心是把「编辑态」从整行粒度下沉到单个单元格，并确保状态精准、渲染干净、交互自然。

用二维定位管理编辑状态

不能只存 row index 或只存字段名，必须同时记录行索引和列标识（如 field），构成唯一坐标。推荐用 ref 管理：

• editingCell = ref({ rowIndex: null, field: null }) —— 初始为 null 表示无编辑
• 双击单元格时赋值：@dblclick="editingCell.value = { rowIndex, field }"
• 判断是否正在编辑该单元格：editingCell.value.rowIndex === rowIndex && editingCell.value.field === field

条件渲染输入框而非显隐切换

v-show 会让 input 始终存在 DOM 中，可能干扰焦点或触发无效事件；应使用 v-if/v-else 实现真正的切换：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 编辑态：渲染 <el-input v-model="tableData[rowIndex][field]" />
• 非编辑态：渲染纯文本 {{ row[field] }} 或带格式的 span
• 避免在同一个 <td> 内混用 v-show 和 v-model，易引发响应式更新异常

聚焦与退出逻辑要闭环

编辑体验的关键细节在于“点即入、失焦即出”：

立即学习“前端免费学习笔记（深入）”；

• 输入框需绑定 @blur="editingCell.value = null" 和 @keyup.enter="editingCell.value = null"
• 用 ref 获取 input 元素，在 nextTick 中调用 inputRef.value?.focus() 实现自动聚焦
• 若用 setTimeout(() => inputRef?.focus(), 0)，兼容性更稳

结合表单校验时注意 prop 路径

当表格嵌套 el-form 进行校验，每个单元格的 prop 必须反映其在数据结构中的真实路径：

• 例如第 2 行、key 字段，prop 应写成 `${rowIndex}.key`
• rules 需按索引层级定义，如 rules['1.key'] = [{ required: true }]
• 校验触发时机建议配合 el-form 的 validate 方法，在保存前统一校验