---
description: "表格里的轻量修改入口：点击单元格，静态值原地换成输入框或下拉，键盘提交/撤销，改完 toast 报告。改个名、调个库存、切个状态——不值得开编辑弹窗的小修，就是它"
---

# 行内编辑（单元格原地改）

表格里的轻量修改入口：点击单元格，静态值原地换成输入框或下拉，键盘提交/撤销，改完 toast 报告。改个名、调个库存、切个状态——不值得开编辑弹窗的小修，就是它。

<iframe src="/skills/dashboard/assets/demo-inline-edit.html"
        style="width:100%;height:520px;border:1px solid #8884;border-radius:10px"
        loading="lazy" title="形状 demo：行内编辑"></iframe>

试这几下：

- 点**商品名** —— 原地变输入框，Enter / 点别处提交，Esc 撤销恢复原值；编辑中再点别的格，前一个先结算
- 点**库存**填 `1200` 或字母 —— 范围校验拒绝提交、就地报错；改成 `0` 会被「服务端」拒绝：值先乐观生效，随后回滚 + 错误 toast
- 点**状态** —— 原地变下拉，选中即提交
- 点 **SKU** —— 点不动。可编辑列是显式声明的，不是每列都该可点

## 规矩

- **同一时刻只编辑一个单元格**：编辑态就是一个 `{ id, field }`，开新格之前旧格必已提交或撤销
- **提交/撤销键位固定**：文本/数字列 Enter、失焦提交，Esc 撤销恢复原值；下拉列选中即提交。别发明第四种手势
- **可编辑列显式声明**：逐列指定编辑控件（文本 → 输入框、枚举 → 下拉），别顺手把整表做成可点
- **先校验、再提交、必 toast**：demo 在内存里乐观更新 + `setTimeout` 假服务端，失败把该字段回滚到原值；真实版把提交换成 `Repository` 的 `update(id, { [field]: value })` mutation，成功后失效该资源的查询键，失败同样回滚 + toast

> 蓝本：`add-inline-edit.md`[^add-inline-edit]（open-dashboard @ `aa9815f`，MIT，Invariants 已消化进上面「规矩」）

??? abstract "demo 源码：`assets/demo-inline-edit.html`（自包含、未压缩）"

    ```html
    --8<-- "skills/dashboard/assets/demo-inline-edit.html"
    ```

[^add-inline-edit]: [`add-inline-edit.md`](https://github.com/ahpxex/open-dashboard/blob/aa9815f426e9520841c4aa15a341bfd9f866091f/.claude/skills/add-component/references/add-inline-edit.md)，2026-07-28 读。