课程章节介绍
咱们今天讲讲在Lightning Web Components里给数据表做内联编辑,这功能其实就靠三个核心点:第一,列的 editable 属性得设为 true;第二,数据表上要通过 draft-values 绑定一个变量;第三,必须实现 onSave 处理器,用来响应保存动作。
当用户直接在单元格里修改内容时,组件会自动把这些变更收集到 draftValues 里。它是一个对象数组,每一项的键是记录 ID,值就是被改过的字段和新的数据。
那在 onSave 里我们要做什么呢?最常用的“收件箱保存模式”是这样的:先从事件参数中取出 draftValues,接着把每一条变更转换成 updateRecord 适配器需要的 { fields } 格式。然后很重要的一步,把 draftValues 清空,这样保存和取消的页脚就会自动隐藏。再用 Promise.all 一次性并行调用所有 updateRecord,因为每条记录的更新是独立的事务。成功之后弹个 toast 提示用户,并且用 refreshApex 刷新一下表格数据,让界面立刻反映最新值。
需要留意的是,每个 updateRecord 调用都是单独提交的,不会打包成一个事务。如果你希望多条记录在同一个事务里一起更新,就不能靠这种客户端方式了。正确的做法是:把已编辑的字段收集起来,调一个自己写的 Apex 控制器,在服务器端完成整体的 DML 操作,完成后在前端调用 notifyRecordUpdateAvailable(),把改动通知给 Lightning Data Service,这样 LDS 缓存就会被自动刷新,界面也同步过来。
记住啦,内联编辑就是这三件套,再加上 save 逻辑里选对策略——单条独立就用 updateRecord 和 Promise.all,需要打包事务就交给 Apex 统一处理。上手试一下就会很清楚。
关键词
LWC
Lightning Web Components
Salesforce