课程章节介绍
嘿,同学,我们来看一下这个闪电快速操作面板。你可能会在列表、记录页面看到一个按钮一点,弹出一个模态框,这就是快速操作。它能让我们做简单的数据编辑,而且UI长得跟Salesforce原生一样,因为有SLDS样式的标题、正文和页脚三个区域。
那制作这个面板,有两种主要模式。第一种最简单:直接用 `lightning-record-edit-form` 加上 `lightning-input-field`,这种形式是自动生成编辑字段的,比如你放一个姓名字段,它自动就知道当前记录是什么,并且自动填充值。注意,这时候按钮是嵌在表单内部的,所以不用额外定义页脚插槽。点保存,它自己就能更新记录。
第二种模式更灵活:你用 `lightning-record-edit-form` 吗?不,这里用自定义表单,也就是 `lightning-input` 这些组件自己搭。然后用 `wire` 加 `getRecord` 把记录数据拉下来,自己绑定到各个输入框。这时候,保存按钮要放到页脚的插槽里,自己写逻辑,比如先验证一下,如果姓名字段为空,就把保存按钮禁用掉。然后真正保存时要调用 `updateRecord()` 方法,亲手把更改提交上去。
别忘了关闭模态框。我们有个事件叫 `CloseScreenEvent`,用它发送就能关掉这个面板。但是,有个大坑要记住:用户按那个 X 按钮直接关闭,并不会触发你的取消逻辑,它只是把窗口关了,所以如果有未保存的更改,你得想办法提醒用户,或者在取消按钮里处理,别光靠 X。
最后,在模态里面,你怎么知道当前是哪个记录、哪个对象呢?它可以通过 `@api` 自动接收 `recordId`,`objectApiName`,甚至整个 `clientPageReference`。你直接用这些属性,或者通过 `wire` 适配器,就能获取页面上下文了,非常方便。
好,这个Slide你理解了吗?总结就是两种实现方式,记得关闭要发事件,验证要自己写,上下文参数自动有。我们下一章继续。
关键词
LWC
Lightning Web Components
Salesforce