如何在LWC模态窗口插入记录后刷新Datatable内容

问题分析 #

你现在的代码里，获取关联Contacts是直接调用Apex方法（imperative Apex），不是用@wire装饰器。refreshApex只能作用在@wire绑定的结果上，所以之前的尝试没法触发表格刷新。另外代码里还有几处小错误要修正，比如HTML里的FisrtName拼写错了。

解决方案一：改用@wire获取Contacts并配合refreshApex #

这种做法更贴合LWC的最佳实践，利用@wire的缓存机制和refreshApex来刷新数据。

具体修改步骤： #

1. 修正HTML拼写错误
   把模态框里的FisrtName改成FirstName：

<lightning-input label="First Name" value={rec.FirstName} onchange={fnameChange}></lightning-input>

2. 重构JS代码，用@wire获取数据
   替换原来的handleChangedValue逻辑，让@wire自动响应选中Account的变化：

import { LightningElement, track, wire } from 'lwc';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LNAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import MOBILE_FIELD from '@salesforce/schema/Contact.MobilePhone';
import ACID_FIELD from '@salesforce/schema/Contact.AccountId';
import getAccounts from '@salesforce/apex/accountsContactdatatableController.getAccounts';
import getContacts from '@salesforce/apex/accountsContactdatatableController.getContacts';
import insertContact from '@salesforce/apex/accountsContactdatatableController.insertContact';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const columns = [
    {label : 'Contact Name', fieldName : 'Name'}
]

export default class AccountContactsdatatable extends LightningElement {
    @track value = '';
    @track optionList = [];
    @track data = [];
    @track columns = columns;
    @track modalWindow = false;
    @track dataTable = false;
    @track addButton = false;
    // 直接初始化空对象，不需要绑定字段引用
    rec = {
        FirstName: '',
        LastName: '',
        Email: '',
        Mobile: '',
        AccountId: ''
    };
    // 存储@wire的完整结果，用于refreshApex
    wiredContactsResult;

    // 用@wire获取Accounts列表
    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.optionList = data.map(account => ({
                label: account.Name,
                value: account.Id
            }));
        } else if (error) {
            this.dispatchEvent(new ShowToastEvent({
                title: '错误',
                message: error.body.message,
                variant: 'error'
            }));
        }
    }

    // 动态获取选中Account的Contacts，$value表示响应value的变化
    @wire(getContacts, { AcctId: '$value' })
    wiredContacts(result) {
        this.wiredContactsResult = result;
        const { error, data } = result;
        if (data) {
            this.data = data;
            this.dataTable = !!this.value; // 选中Account就显示表格
            this.addButton = !!this.value;
        } else if (error) {
            this.dispatchEvent(new ShowToastEvent({
                title: '错误',
                message: error.body.message,
                variant: 'error'
            }));
        }
    }

    handleChangedValue(event) {
        this.value = event.detail.value;
        // 不用手动调用getContacts，@wire会自动刷新数据
    }

    createContact(event) {
        this.rec.AccountId = this.value;
        insertContact({ cnt: this.rec })
            .then(result => {
                // 清空表单
                this.rec = { FirstName: '', LastName: '', Email: '', Mobile: '', AccountId: '' };
                this.dispatchEvent(new ShowToastEvent({
                    title: '成功',
                    message: 'Contact创建成功',
                    variant: 'success'
                }));
                // 调用refreshApex刷新@wire的Contacts数据
                return refreshApex(this.wiredContactsResult);
            })
            .catch(error => {
                this.dispatchEvent(new ShowToastEvent({
                    title: '创建失败',
                    message: error.body.message,
                    variant: 'error'
                }));
            })
            .finally(() => {
                this.customHideModalPopup();
            });
    }

    // 保留其他原有方法：addContact、customHideModalPopup、fnameChange等
    addContact(){
        this.modalWindow = true;
    }

    customHideModalPopup(){
        this.modalWindow = false;
    }

    fnameChange(event){
        this.rec.FirstName = event.target.value;
    }

    lnameChange(event){
        this.rec.LastName = event.target.value;
    }

    emailChange(event){
        this.rec.Email = event.target.value;
    }

    mobileChange(event){
        this.rec.Mobile = event.target.value;
    }
}

3. Apex代码无需修改
   原有的Apex控制器逻辑可以直接用，确保getContacts能正确返回关联的Contacts就行。

解决方案二：创建Contact后重新调用getContacts（快速修改方案） #

如果不想改@wire，可以在创建Contact成功后，手动重新调用getContacts拉最新数据：

修改createContact方法： #

createContact(event) {
    this.rec.AccountId = this.value;
    insertContact({ cnt: this.rec })
        .then(result => {
            this.rec = { FirstName: '', LastName: '', Email: '', Mobile: '', AccountId: '' };
            this.dispatchEvent(new ShowToastEvent({
                title: '成功',
                message: 'Contact创建成功',
                variant: 'success'
            }));
            // 重新调用getContacts获取最新数据
            return getContacts({ AcctId: this.value });
        })
        .then(contacts => {
            this.data = contacts;
        })
        .catch(error => {
            this.dispatchEvent(new ShowToastEvent({
                title: '创建失败',
                message: error.body.message,
                variant: 'error'
            }));
        })
        .finally(() => {
            this.customHideModalPopup();
        });
}

关键说明 #

• @wire里的$value是响应式参数，当选中的Account变化时，会自动重新调用Apex获取数据；
• refreshApex必须传入@wire返回的完整结果（不是data属性），才能正确触发缓存刷新；
• 两种方案都能实现表格自动刷新，方案一更符合LWC的响应式设计，方案二更适合快速调整。

内容的提问来源于stack exchange，提问作者deep4code