列表页里「点一下就能改数据」是很常见但细节很多的需求。很多人第一反应是在el-table 的插槽里塞个el-input 功能是能跑通但一旦遇到下面这些场景就会很痛苦数字列要 限制只能输数字、限制小数位 点击进入编辑、 回车确认、Esc 取消、失焦提交 编辑态要 自动聚焦 配合表格的 分组小计、合并单元格 一起用单元格要 受控 数据源可控、可回滚。本文基于一个真实管理系统的实现拆解一个可复用的EditableCell 组件。文末会重点讲几个新手极易踩的坑nextTick 聚焦时机、数字过滤正则、失焦与输入的冲突。一、需求拆解先明确组件要解决什么非编辑态 显示格式化后的文本 一个悬停才出现的「编辑」小图标编辑态 变成输入框并 自动聚焦 文本列 直接双向绑定数字列 只能输数字和小数点且 小数位受控 交互 心跳式三件套 —— 回车提交、Esc 取消、失焦提交受控 组件自身不持有「落地值」一切通过modelValue 单向流入、update:modelValue 流出父组件决定何时生效、何时回滚。一句话总结 这是一个完全受控的、可复用的行内编辑单元 。二、组件设计受控 v-model 语义采用 Vue 3 标准的v-model 约定props.modelValue —— 当前值父组件传入编辑时输入框跟着它走props.displayValue —— 非编辑态展示文本可能和modelValue 不同例如金额要格式化、空值显示- props.editing —— 是否处于编辑态 由父组件控制 而不是组件自己猜props.numeric —— 是否数字列决定要不要做输入过滤props.decimalScale —— 允许的小数位默认 2。为什么要让editing 由父组件控制因为「哪些行、哪些列现在处于编辑态」往往关联着表格的草稿态、批量保存、分组小计等 页面级状态 组件自己持有会失控。组件只负责「把编辑行为上报」父组件负责「决定状态」。三、完整代码实现!-- EditableCell.vue -- template div classeditable-cell :class{ is-editing: editing } clickhandleEdit !-- 编辑态输入框 -- el-input v-ifediting refinputRef :model-valuemodelValue sizesmall inputhandleInput blur$emit(blur) keydown.enter$event.target.blur() keydown.esc$emit(cancel) / !-- 非编辑态文本 悬停图标 -- template v-else span classeditable-cell__text{{ displayValue }}/span el-icon classeditable-cell__iconEditPen //el-icon /template /div /template script setup import { nextTick, ref, watch } from vue import { EditPen } from element-plus/icons-vue const props defineProps({ modelValue: { type: [String, Number], default: }, displayValue: { type: String, default: - }, editing: Boolean, numeric: Boolean, decimalScale: { type: Number, default: 2 }, }) const emit defineEmits([edit, update:modelValue, blur, cancel]) const inputRef ref() // 进入编辑态后等 DOM 渲染完成再聚焦 watch( () props.editing, async (editing) { if (!editing) return await nextTick() inputRef.value?.focus() }, ) // 点击非编辑态区域 - 通知父组件进入编辑 const handleEdit () { if (!props.editing) emit(edit) } // 输入处理文本直接回传数字列做过滤 const handleInput (value) { if (!props.numeric) { emit(update:modelValue, value) return } const cleaned String(value) .replace(/[^\d.]/g, ) // 去掉数字和小数点以外的字符 .replace(/\.(?.*\.)/g, ) // 只保留一个小数点 const [integer , decimal] cleaned.split(.) emit( update:modelValue, decimal undefined ? integer : ${integer}.${decimal.slice(0, props.decimalScale)}, ) } /script style scoped .editable-cell { display: inline-flex; align-items: center; min-width: 70px; min-height: 28px; cursor: text; } .editable-cell.is-editing { width: 100%; } .editable-cell__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editable-cell__icon { flex: none; margin-left: 5px; color: #1677ff; opacity: 0; /* 默认隐藏 */ transition: opacity 0.15s ease; } .editable-cell:hover .editable-cell__icon { opacity: 1; /* 悬停时出现 */ } /style关键实现点① 数字输入过滤核心正则const cleaned String(value) .replace(/[^\d.]/g, ) // 1. 只留数字和点 .replace(/\.(?.*\.)/g, ) // 2. 多个点只留一个第一条正则把所有非「数字/小数点」的字符清空。第二条正则是亮点\.(?.*\.) 表示「后面还跟着一个点的点」把它替换掉最终只保留一个小数点。然后split(.) 拆整数/小数decimal.slice(0, decimalScale) 截断小数位。② 自动聚焦 —— 为什么要await nextTick()因为输入框是用v-ifediting 渲染的editing 变true 的那一刻el-input 还没挂到 DOM 上。直接在 watch 里inputRef.value?.focus() 会拿到undefined 。必须await nextTick() 等渲染完成后再聚焦。③ 回车 失焦Esc 取消1. keydown.enter$event.target.blur() 回车触发 blur自然走到「失焦提交」逻辑2.keydown.esc$emit(cancel) Esc 走取消父组件可以把草稿值回滚。四、配合 el-table 分组小计使用光有单元格不够真正复杂的是把它嵌进一张「带分组小计」的表格里。下面是父页面的大致用法el-table :datatableRows :span-methodtableSpanMethod border el-table-column label资产编号 min-width135 template #default{ row } !-- 明细行可编辑 -- EditableCell v-ifrow._rowType detail :model-valuerow.assetNo :display-valuedisplayText(row.assetNo) :editingrow._isDraft || isEditing(row, assetNo) editbeginEdit(row, assetNo) update:model-valueupdateCell(row, assetNo, $event) blurfinishEdit(row, assetNo) cancelcancelEdit(row, assetNo) / !-- 小计行只读 -- span v-else classsummary-label小计/span /template /el-table-column /el-table父页面需要维护几个状态const editingCell ref({ _key: , field: }) // 当前编辑的单元格 const isEditing (row, field) editingCell.value._key row._key editingCell.value.field field const beginEdit (row, field) { editingCell.value { _key: row._key, field } } const updateCell (row, field, value) { if (!row._isDraft) row._isDraft true // 进入草稿态 row[field] value } const finishEdit () { editingCell.value { _key: , field: } } const cancelEdit () { finishEdit() }几个设计要点row._rowType 区分「明细行」和「小计行」小计行不渲染EditableCell 直接显示小计 row._isDraft 标记草稿行新行进来时天然是草稿态可直接编辑已有行点一下才进入编辑编辑态是「页级唯一」的 用editingCell 记录「当前是哪一行哪一列」保证同一时间只有一个单元格在编辑避免表格里一堆输入框互相抢焦点。这样就把「单元格交互」和「页面状态管理」分层了EditableCell 无脑上报父组件统筹草稿、分组、保存/回滚。五、踩坑清单坑表现解法直接在 watch 里 focus拿不到 input聚焦失效await nextTick() 后再 focus数字列没做过滤能输字母、多个小数点正则过滤 截断小数位editing 由组件自己管理多行多列同时进入编辑、状态混乱交给父组件页级唯一失焦提交与 Esc 取消冲突Esc 后仍被 blur 提交Esc 用独立cancel 事件不走 blur空值展示null /undefined单元格空白displayValue 兜底为-点击输入框冒泡触发外层点击循环进入编辑编辑态下handleEdit 直接 return六、更轻量的备选方案如果只是个别列需要「随手改」不想引入完整组件也可以在表格插槽里直接用el-input。el-input :model-valuerow[item.key] sizesmall input(val) handleInput(val, row, item.key) blur$emit(blur, row, item.key) keydown.enter$event.target.blur() /优点是无editing 状态、代码更短缺点是没法做「点击图标才进编辑」「Esc 取消回滚」这类精细交互数字校验也要自己写。 完整组件适合强交互、高复用场景轻量写法适合一次性场景 按需选择即可。七、总结一个合格的行内可编辑单元格本质上是三件事的分层1. 组件层EditableCell 只负责渲染 上报edit /update:modelValue /blur /cancel 完全受控、无状态2. 页面层 维护「当前编辑单元格」「草稿态」等页级状态决定生效与回滚3. 表格层span-method 行类型 处理分组小计、合并单元格等展示逻辑。核心细节记住两个就够了 nextTick 才能拿 DOM 聚焦 、 数字列要用正则过滤 小数位截断 。把这两点吃透剩下都是业务拼装。
列表页里「点一下就能改数据」是很常见但细节很多的需求。很多人第一反应是在el-table 的插槽里塞个el-input 功能是能跑通但一旦遇到下面这些场景就会很痛苦数字列要 限制只能输数字、限制小数位 点击进入编辑、 回车确认、Esc 取消、失焦提交 编辑态要 自动聚焦 配合表格的 分组小计、合并单元格 一起用单元格要 受控 数据源可控、可回滚。本文基于一个真实管理系统的实现拆解一个可复用的EditableCell 组件。文末会重点讲几个新手极易踩的坑nextTick 聚焦时机、数字过滤正则、失焦与输入的冲突。一、需求拆解先明确组件要解决什么非编辑态 显示格式化后的文本 一个悬停才出现的「编辑」小图标编辑态 变成输入框并 自动聚焦 文本列 直接双向绑定数字列 只能输数字和小数点且 小数位受控 交互 心跳式三件套 —— 回车提交、Esc 取消、失焦提交受控 组件自身不持有「落地值」一切通过modelValue 单向流入、update:modelValue 流出父组件决定何时生效、何时回滚。一句话总结 这是一个完全受控的、可复用的行内编辑单元 。二、组件设计受控 v-model 语义采用 Vue 3 标准的v-model 约定props.modelValue —— 当前值父组件传入编辑时输入框跟着它走props.displayValue —— 非编辑态展示文本可能和modelValue 不同例如金额要格式化、空值显示- props.editing —— 是否处于编辑态 由父组件控制 而不是组件自己猜props.numeric —— 是否数字列决定要不要做输入过滤props.decimalScale —— 允许的小数位默认 2。为什么要让editing 由父组件控制因为「哪些行、哪些列现在处于编辑态」往往关联着表格的草稿态、批量保存、分组小计等 页面级状态 组件自己持有会失控。组件只负责「把编辑行为上报」父组件负责「决定状态」。三、完整代码实现!-- EditableCell.vue -- template div classeditable-cell :class{ is-editing: editing } clickhandleEdit !-- 编辑态输入框 -- el-input v-ifediting refinputRef :model-valuemodelValue sizesmall inputhandleInput blur$emit(blur) keydown.enter$event.target.blur() keydown.esc$emit(cancel) / !-- 非编辑态文本 悬停图标 -- template v-else span classeditable-cell__text{{ displayValue }}/span el-icon classeditable-cell__iconEditPen //el-icon /template /div /template script setup import { nextTick, ref, watch } from vue import { EditPen } from element-plus/icons-vue const props defineProps({ modelValue: { type: [String, Number], default: }, displayValue: { type: String, default: - }, editing: Boolean, numeric: Boolean, decimalScale: { type: Number, default: 2 }, }) const emit defineEmits([edit, update:modelValue, blur, cancel]) const inputRef ref() // 进入编辑态后等 DOM 渲染完成再聚焦 watch( () props.editing, async (editing) { if (!editing) return await nextTick() inputRef.value?.focus() }, ) // 点击非编辑态区域 - 通知父组件进入编辑 const handleEdit () { if (!props.editing) emit(edit) } // 输入处理文本直接回传数字列做过滤 const handleInput (value) { if (!props.numeric) { emit(update:modelValue, value) return } const cleaned String(value) .replace(/[^\d.]/g, ) // 去掉数字和小数点以外的字符 .replace(/\.(?.*\.)/g, ) // 只保留一个小数点 const [integer , decimal] cleaned.split(.) emit( update:modelValue, decimal undefined ? integer : ${integer}.${decimal.slice(0, props.decimalScale)}, ) } /script style scoped .editable-cell { display: inline-flex; align-items: center; min-width: 70px; min-height: 28px; cursor: text; } .editable-cell.is-editing { width: 100%; } .editable-cell__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editable-cell__icon { flex: none; margin-left: 5px; color: #1677ff; opacity: 0; /* 默认隐藏 */ transition: opacity 0.15s ease; } .editable-cell:hover .editable-cell__icon { opacity: 1; /* 悬停时出现 */ } /style关键实现点① 数字输入过滤核心正则const cleaned String(value) .replace(/[^\d.]/g, ) // 1. 只留数字和点 .replace(/\.(?.*\.)/g, ) // 2. 多个点只留一个第一条正则把所有非「数字/小数点」的字符清空。第二条正则是亮点\.(?.*\.) 表示「后面还跟着一个点的点」把它替换掉最终只保留一个小数点。然后split(.) 拆整数/小数decimal.slice(0, decimalScale) 截断小数位。② 自动聚焦 —— 为什么要await nextTick()因为输入框是用v-ifediting 渲染的editing 变true 的那一刻el-input 还没挂到 DOM 上。直接在 watch 里inputRef.value?.focus() 会拿到undefined 。必须await nextTick() 等渲染完成后再聚焦。③ 回车 失焦Esc 取消1. keydown.enter$event.target.blur() 回车触发 blur自然走到「失焦提交」逻辑2.keydown.esc$emit(cancel) Esc 走取消父组件可以把草稿值回滚。四、配合 el-table 分组小计使用光有单元格不够真正复杂的是把它嵌进一张「带分组小计」的表格里。下面是父页面的大致用法el-table :datatableRows :span-methodtableSpanMethod border el-table-column label资产编号 min-width135 template #default{ row } !-- 明细行可编辑 -- EditableCell v-ifrow._rowType detail :model-valuerow.assetNo :display-valuedisplayText(row.assetNo) :editingrow._isDraft || isEditing(row, assetNo) editbeginEdit(row, assetNo) update:model-valueupdateCell(row, assetNo, $event) blurfinishEdit(row, assetNo) cancelcancelEdit(row, assetNo) / !-- 小计行只读 -- span v-else classsummary-label小计/span /template /el-table-column /el-table父页面需要维护几个状态const editingCell ref({ _key: , field: }) // 当前编辑的单元格 const isEditing (row, field) editingCell.value._key row._key editingCell.value.field field const beginEdit (row, field) { editingCell.value { _key: row._key, field } } const updateCell (row, field, value) { if (!row._isDraft) row._isDraft true // 进入草稿态 row[field] value } const finishEdit () { editingCell.value { _key: , field: } } const cancelEdit () { finishEdit() }几个设计要点row._rowType 区分「明细行」和「小计行」小计行不渲染EditableCell 直接显示小计 row._isDraft 标记草稿行新行进来时天然是草稿态可直接编辑已有行点一下才进入编辑编辑态是「页级唯一」的 用editingCell 记录「当前是哪一行哪一列」保证同一时间只有一个单元格在编辑避免表格里一堆输入框互相抢焦点。这样就把「单元格交互」和「页面状态管理」分层了EditableCell 无脑上报父组件统筹草稿、分组、保存/回滚。五、踩坑清单坑表现解法直接在 watch 里 focus拿不到 input聚焦失效await nextTick() 后再 focus数字列没做过滤能输字母、多个小数点正则过滤 截断小数位editing 由组件自己管理多行多列同时进入编辑、状态混乱交给父组件页级唯一失焦提交与 Esc 取消冲突Esc 后仍被 blur 提交Esc 用独立cancel 事件不走 blur空值展示null /undefined单元格空白displayValue 兜底为-点击输入框冒泡触发外层点击循环进入编辑编辑态下handleEdit 直接 return六、更轻量的备选方案如果只是个别列需要「随手改」不想引入完整组件也可以在表格插槽里直接用el-input。el-input :model-valuerow[item.key] sizesmall input(val) handleInput(val, row, item.key) blur$emit(blur, row, item.key) keydown.enter$event.target.blur() /优点是无editing 状态、代码更短缺点是没法做「点击图标才进编辑」「Esc 取消回滚」这类精细交互数字校验也要自己写。 完整组件适合强交互、高复用场景轻量写法适合一次性场景 按需选择即可。七、总结一个合格的行内可编辑单元格本质上是三件事的分层1. 组件层EditableCell 只负责渲染 上报edit /update:modelValue /blur /cancel 完全受控、无状态2. 页面层 维护「当前编辑单元格」「草稿态」等页级状态决定生效与回滚3. 表格层span-method 行类型 处理分组小计、合并单元格等展示逻辑。核心细节记住两个就够了 nextTick 才能拿 DOM 聚焦 、 数字列要用正则过滤 小数位截断 。把这两点吃透剩下都是业务拼装。
