本篇參考:
https://developer.salesforce.com/docs/component-library/bundle/lightning-input-field/documentation
https://www.lightningdesignsystem.com/components/input/
在https://www.cnblogs.com/zero-zyq/p/11380449.html 篇中,我們瞭解了 LDS的使用,其中讓我們用起來很爽的莫過於使用lightning-input-field。
我們在Account表中建立兩個欄位,分別為User_For_LookUp__c關聯到User表以及Contact_For_Lookup__c用來關聯到Contact表。
eventCreate.html:用於關聯需要建立Event的幾個欄位,因為Event不能使用 lightning-record-edit-form,所以將 暫時繫結 到Account,OwnerId使用 User_For_LookUp__c借殼繫結,WhoId使用Contact_For_Lookup__c繫結。
<template> <lightning-card> <lightning-record-edit-form object-api-name='Account' onsubmit={saveEvent} > <lightning-layout multiple-rows="true"> <lightning-layout-item size="6" padding="around-small" flexibility='auto'> <lightning-input type="text" label="Subject" name="subject" value={eventWrapper.subject} onchange={handleInputChange}></lightning-input> </lightning-layout-item> <lightning-layout-item size="6" padding="around-small" flexibility='auto'> </lightning-layout-item> <lightning-layout-item padding="around-small" flexibility='auto' size='6'> <lightning-input label="Start Date" type="datetime" name="startDateTime" value={eventWrapper.startDateTime} date-style="long" required onchange={handleInputChange}></lightning-input> </lightning-layout-item> <lightning-layout-item padding="around-small" flexibility='auto' size='6'> <lightning-input label="End Date" type="datetime" name="endDateTime" value={eventWrapper.endDateTime} date-style="long" required onchange={handleInputChange}></lightning-input> </lightning-layout-item> <lightning-layout-item size="6" padding="around-small" flexibility='auto'> <lightning-input-field field-name="User_For_LookUp__c" variant="label-stacked" ></lightning-input-field> </lightning-layout-item> <lightning-layout-item size="6" padding="around-small" flexibility='auto'> <lightning-input-field field-name="Contact_For_Lookup__c" variant="label-stacked" ></lightning-input-field> </lightning-layout-item> </lightning-layout> <lightning-layout> <lightning-layout-item> <lightning-button-group> <lightning-button type="submit" label="Submit"></lightning-button> <lightning-button label="cancel"></lightning-button> </lightning-button-group> </lightning-layout-item> </lightning-layout> </lightning-record-edit-form> </lightning-card> </template>
eventCreate.js:當 saveEvent方法時,先組織預設提交,通過event.detail.fields可以獲取到 record-edit-form中的所有的 lightning-input-field的繫結值內容,在給自定義的wrapper欄位賦值傳遞到後臺即可。
import { LightningElement,track } from 'lwc'; export default class EventCreate extends LightningElement { @track eventWrapper = { subject : '', whoId : '', ownerId : '', startDateTime : '', endDateTime : '' }; handleInputChange(event) { let eventSourceName = event.target.name; if(eventSourceName === 'subject') { this.eventWrapper.subject = event.target.value; } else if(eventSourceName === 'startDateTime') { this.eventWrapper.startDateTime = event.target.value; } else if(eventSourceName === 'endDateTime') { this.eventWrapper.endDateTime = event.target.value; } } saveEvent(event) { event.preventDefault(); const allFields = event.detail.fields; this.eventWrapper.whoId = allFields.User_For_LookUp__c; this.eventWrapper.ownerId = allFields.Contact_For_Lookup__c; console.log(JSON.stringify(this.eventWrapper)); } }
效果展示:當我們錄入完基本資訊點選 submit按鈕以後,console欄展示了返回的內容。
上面我們使用的variant是label-stacked,可以看到User_For_LookUp__c欄位展示的 label是 User For LookUp,但是我們想要展示他的值是 Owner Id,然而lightning-input-field中沒有任何屬性可以更改其label值,應該如何操作呢?這個時候可以看前輩們提供的方法了,原操作可以檢視片頭連結。
祕密就在variant中,lwc針對此元件存在一個variant為label-hidden,即不展示 label資訊,我們只需要隱藏這個欄位的label值,然後通過lightning design system中的提供方式重新佈局展示想要的label資訊即可,優化後程式碼如下:
修改之後的展示效果:
總結:篇中主要描述如何對 lightning-input-field的label值進行修改,允許修改以後可以極大程度上保證了欄位的複用性和可擴充套件性。篇中有錯誤地方歡迎指出,有不懂歡迎留言。