本篇參考：

https://salesforcediaries.com/2020/02/24/how-to-override-lightning-input-field-label-in-lightning-web-component/

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。

lightning-input-field因為他獨特的魅力深受開發人員喜愛，看到了他，莫名的讓人會想起 lightning:inputField以及apex:inputField，欄位型別宣告什麼無所謂，只需要使用此標籤繫結欄位便可以渲染成需要的標準頁面的效果。使用時需要將其放在 lightning-record-edit-form中，當然，使用 lightning-record-edit-form搭配 lightning-input-field時需要考慮幾點： 1. 當前 user對 lighting-record-edit-form繫結的表應該有 create或者edit許可權； 2. 當前的 user應該對 lightning-input-field繫結的欄位有 visible的許可權。 3. lightning-record-edit-form不是支援所有的表，只有在其允許使用的表中才可以使用此標籤以及此欄位，比如 Event/Task就不支援這個元件，對Event / Task就沒法使用 lightning-event-edit-form以及 lightning-input-field； 4. lightning-input-field不是支援所有的欄位型別，儘管大部分都支援，但是有一小部分還是不支援的，比如 master-detail型別。
說完限制，再說一下使用場景。lightning-record-edit-form 通常可以用在兩種情況： 1. 自定義編輯頁面 2. 檢索列表功能中的form查詢頁面
所以針對具體的需求進行適當的使用亦或廢棄找其他的解決方案基於這些限制以及這些功能，我們根據不同的case去進行不同的封裝。
比如表單中只是針對 text/currency等等型別，我們可以使用 lightning-input，針對 picklist我們可以使用 lightning-combobox，這種基礎型別換其他方案問題不大。 但是如果表單中存在針對 lookup這種彈出元件時，我們卻很為難，因為除了 lightning-input-field以外，其他的沒有直接的辦法去展示以及實現此種功能。自定義的元件雖可以完成大部分其需要的功能，卻無法和標準的相匹配，所以此種情況很容易借殼搞定類似需求。
如何借殼？ 需要滿足哪些條件？ 1. 在lightning-record-edit-form支援的表中建立 lookup欄位，關聯到需要選擇的表，比如自定義表中建立一個欄位，關聯到user； 2. 保證當前的這個表對可以訪問此元件的 所有的 profile都有 建立或者編輯資料的許可權，如果沒有建立或者編輯的許可權， lightning-record-edit-form繫結此表沒有編輯的能力和效果； 3. 保證可以訪問此元件的所有的 profile對建立的這個欄位的 FLS都要editable。

 我們在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值進行修改，允許修改以後可以極大程度上保證了欄位的複用性和可擴充套件性。篇中有錯誤地方歡迎指出，有不懂歡迎留