表格行内编辑怎么设计？保存、取消与冲突

表格行内编辑适合在查看列表时修改少量、独立的字段。进入编辑后保留行与列的身份，明确保存和取消；点击外部、按回车、按Escape分别产生什么结果，要保持一致。保存失败保留新输入，他人已修改同一值时先呈现差异，不静默覆盖。若整页都在录入或字段之间有复杂依赖，完整表单通常更清楚。

以库存列表为例，运营准备把“桌面阅读灯”的安全库存从20改成30。用交互原型制作与预览连接只读、编辑、失败和冲突四种画面，团队就能直接判断：现在屏幕上的30只是输入值，还是已经保存的正式值。

先判断这一格能不能独立修改

行内编辑的好处是保持列表上下文。运营能在同一行看到商品、仓库和当前库存，不需要打开详情再回来。但这种便利依赖一个前提：修改这项值的影响容易理解。安全库存是一个独立阈值，可以在原位调整；若修改商品类型会影响计价方式、税率和配送规则，就不宜把复杂决策压进一个小格子。

可以先问三个问题：用户是否需要对照同一行的信息；这次修改是否只涉及一个清楚的值；提交前是否还有必须确认的关联条件。前两项成立且第三项简单时，行内编辑比较合适。若需要连续填很多格、批量粘贴或对整行一起校验，应将任务按复杂表单的分组与提交规则组织，而不是给每个数字都加铅笔图标。

Atlassian 的行内文本编辑用法区分了查看与编辑视图，并提示不要在以编辑为主要目的的页面滥用这种模式。它提供的是选择组件的依据；库存业务的权限、有效范围和保存接口仍要由团队确定。

进入编辑后，仍看得出正在改哪一行

不要只在鼠标悬停时露出一个极小图标，让触屏或键盘用户找不到入口。可编辑字段应有一致的提示方式，例如可发现的编辑按钮、聚焦后的操作或清楚的编辑文案。若整行还承担打开详情的动作，点击编辑入口就不应同时跳走；点击文本选择数字，也不应被误判为打开整行。

字段切换成输入框时，文本起点、列宽和行高尽量稳定。运营应仍然看见“桌面阅读灯”和“安全库存”，而不是输入框出现后整列被挤动。数值20进入编辑状态，可以按任务决定选中全部数字还是把光标放到末尾，但要保证替换操作容易预测，不要每次重新渲染就选中用户正在输入的内容。

保存和取消按钮应处在字段附近，并有明确名称。只用勾与叉时，为图标提供可感知标签；如果表格太窄，操作按钮会覆盖下一行，考虑展开行内编辑区或使用侧边表单。把按钮做得更小不是唯一解决办法，尤其在手机上，不应以精确点中两个小图标作为正常流程的前提。

先选定提交方式，再安排回车和失焦

这个库存字段采用明确的“保存”“取消”：保存将输入值提交，取消放弃本次未保存修改并退出编辑。回车可以作为保存快捷操作，Escape可以作为取消快捷操作，但都应遵循同一套规则，且不吞掉输入法组字或控件自身需要处理的键盘事件。快捷键是可见操作的补充，不能替代可发现的按钮。

点击表格其他位置时，建议先与产品确认到底保留编辑、保存还是取消。对于有业务后果的阈值，保留编辑或要求明确保存更容易解释；若选用失焦即保存，需要让用户事先理解，并处理点击取消前字段先失焦这类事件顺序。不能让同一次点击一边保存，一边又显示取消成功。

Atlassian 的行内编辑文档提供了保持编辑状态、隐藏操作按钮、校验以及确认取消等不同设置。这说明失焦行为是要设计的选择，不是所有行内编辑天然相同。套用组件时也要核对实际设置，而不是认为画出两个图标，交互就已经完整。

保存中和保存失败，不应都退回普通数字

保存请求发出后，暂时阻止同一字段叠加提交，并给出局部处理中状态。没有必要冻结整张库存表，但用户离开本行、排序或切换筛选时，仍应清楚当前修改是否已经结束。若允许继续其他工作，应保留能找到待处理项的入口，不让未完成的操作随着排序跑到屏幕外。

明确保存成功后，再回到只读状态显示正式值30。服务器如果对数据做了合法处理，例如按照业务规则返回另一个有效值，界面应呈现真实返回结果并解释必要差异，不能继续显示本地输入假装一致。对于数值范围、步长和单位的规则，需要在字段附近表达，而不是全部藏进保存失败消息。

保存失败时保留30和编辑位置，说明问题与可继续动作。输入不符合规则，就在本格解释如何调整；暂时无法保存，可以允许重新尝试；没有权限，则需要相应说明而不是无限重试。如果请求结果未知，先确认正式值或请求状态，避免按“失败”回退后又触发重复写入。

系统值已变成25时，不让30悄悄覆盖它

运营打开编辑时看到20，另一位同事随后把阈值改成25，运营此时准备保存30。这里同时存在三个值：开始编辑时的20、系统当前的25、自己的未保存输入30。只显示“保存失败”让人不知道发生了什么；直接以最后一次点击为准，则可能覆盖同事刚完成的调整。

界面可以写“这个值已更新”，并并列显示“系统当前：25”和“你的修改：30”，让用户选择采用当前值，或按权限和业务规则重新提交自己的修改。开始编辑时的20可用于说明差异，但不必让所有人面对复杂的版本术语。不能把“仍保存30”默认等同于总是安全的覆盖；最终规则应与服务端的并发控制一致。

在这种情况下点击取消，应放弃本次输入30，再显示已经生效的25，而不是把过时的20重新写回。若系统无法提供最新值，先刷新对应记录并解释状态，不凭本地缓存宣称已恢复。这也是为何普通取消与“撤销已保存变更”必须分开：前者取消输入，后者是另一笔业务操作。

在 Pixso 中将同一库存行复制成只读、编辑和冲突三个区域，始终保留商品名“桌面阅读灯”。用注释标出20是编辑前值、25是系统新值、30是用户输入，再画出“采用当前值”与“重新提交修改”两条分支。设计画布负责解释选择，真正检测并发修改仍由系统实现。

离开这一格，也要能继续用表格

保存或取消后，把焦点放回合理位置，例如刚才的编辑入口，让键盘用户能够继续下一行。错误出现时保持输入可操作，辅助说明与字段关联；不要自动跳到表格顶部，使人失去正在修改的商品。窄屏和放大字号下也要确认提示不会遮住保存或取消。

用一次完整任务检查：找到桌面阅读灯，20改30并取消；再次修改并保存成功；模拟失败后保留30；最后让系统值变成25，确认冲突路径没有静默覆盖。再在编辑中排序或翻页，核对产品约定是否仍成立。交付到这个粒度，表格行内编辑才不只是一个能点开的输入框。