LWC多选Account记录修改提交更新Salesforce数据库问题求助

问题核心 #

已实现Account记录展示、选中状态捕获，但无法获取修改后的字段值，也不清楚如何提交更新到Salesforce数据库。

分步解决 #

1. 实时捕获字段修改值（HTML+JS调整） #

当前输入框未绑定变更事件，修改后的值无法同步到accList数组。需给每个输入框添加onchange事件，实时更新数据：

修改后的HTML代码

<template>
    <table class="slds-table slds-table_cell-buffer slds-table_col-bordered" border="1" width="100%">
        <thead>
            <tr class="slds-line-height_reset">
                <td>
                    <lightning-input type="checkbox" onchange={handleAllChange}></lightning-input>
                </td>
                <td style="font-weight:bold">Account Name</td>
                <td style="font-weight:bold">Phone</td>
            </tr>
        </thead>
        <template for:each={accList} for:item="acc">
            <tr key={acc.id} class="slds-hint-parent">
                <td>
                    <lightning-input type="checkbox" checked={acc.isSelected} onchange={handleCheckChange}
                        value={acc.index}>
                    </lightning-input>
                </td>
                <td>
                    <lightning-input type="text" value={acc.AccountName} onchange={handleFieldChange} data-field="AccountName" data-index={acc.index}>
                    </lightning-input>
                </td>
                <td>
                    <lightning-input type="tel" value={acc.Phone} onchange={handleFieldChange} data-field="Phone" data-index={acc.index}></lightning-input>
                </td>
            </tr>
        </template>
    </table>
    <br />
    <lightning-button label="提交更新" onclick={submitUpdates} variant="brand"></lightning-button>
</template>

对应JS新增字段变更处理函数

在JS中添加方法，通过data-*属性定位要更新的字段和索引，实时修改accList中的数据：

handleFieldChange(event) {
    const index = event.target.dataset.index;
    const fieldName = event.target.dataset.field;
    this.accList[index][fieldName] = event.target.value;
}

2. 提交选中记录到Apex更新数据库 #

修正Apex方法名称并新增更新逻辑，同时实现JS提交与数据刷新：

修改后的Apex类（新增更新方法）

public with sharing class AccountWrapperClass {
    @AuraEnabled(cacheable=true)
    public static String getAccounts(){
        Integer rowIndex = 0;
        List<accountWrap> accWrapList = new List<accountWrap>();
        try {
            List<Account> accList = [SELECT Id, Name, Phone FROM Account limit 10];
            for(Account a : accList){
                accWrapList.add(new accountWrap(a.Id,a.Name,a.Phone,rowIndex));
                rowIndex++;
            }
            return JSON.serialize(accWrapList);
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }

    @AuraEnabled
    public static List<Account> updateSelectedAccounts(List<accountWrap> selectedAccounts){
        List<Account> accountsToUpdate = new List<Account>();
        try {
            for(accountWrap wrap : selectedAccounts){
                Account acc = new Account(
                    Id = wrap.Id,
                    Name = wrap.AccountName,
                    Phone = wrap.Phone
                );
                accountsToUpdate.add(acc);
            }
            update accountsToUpdate;
            return accountsToUpdate;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }

    public class accountWrap{
        @AuraEnabled
        public String Id;
        @AuraEnabled
        public String AccountName;
        @AuraEnabled
        public String Phone;
        @AuraEnabled
        public Boolean isSelected;
        @AuraEnabled
        public Integer index;
        
        public accountWrap(String Id, String AccountName, String Phone, Integer index){
            this.Id = Id;
            this.AccountName = AccountName;
            this.Phone = Phone;
            this.isSelected = false;
            this.index = index;
        }
    }
}

注意：给accountWrap的所有属性添加@AuraEnabled，确保LWC能正确序列化传递数据。

修改后的JS代码（提交逻辑+数据刷新）

import { LightningElement, wire } from 'lwc';
import getAccList from '@salesforce/apex/AccountWrapperClass.getAccounts';
import updateSelectedAccounts from '@salesforce/apex/AccountWrapperClass.updateSelectedAccounts';
import { refreshApex } from '@salesforce/apex';

export default class WrapperTable extends LightningElement {
    selectedAccounts = [];
    accList;
    wiredAccountsResult; // 存储wire结果引用，用于刷新

    @wire(getAccList)
    wiredRecord(result) {
        this.wiredAccountsResult = result;
        const { error, data } = result;
        if (error) {
            let message = "Unknown error";
            if (Array.isArray(error.body)) {
                message = error.body.map((e) => e.message).join(", ");
            } else if (typeof error.body.message === "string") {
                message = error.body.message;
            }
            console.error(message);
        } else if (data) {
            this.accList = JSON.parse(data);
        }
    }

    handleAllChange(event) {
        for (let i = 0; i < this.accList.length; i++) {
            this.accList[i].isSelected = event.target.checked;
        }
    }

    handleCheckChange(event) {
        this.accList[event.target.value].isSelected = event.target.checked;
    }

    handleFieldChange(event) {
        const index = event.target.dataset.index;
        const fieldName = event.target.dataset.field;
        this.accList[index][fieldName] = event.target.value;
    }

    async submitUpdates() {
        // 筛选选中的记录
        const selectedRecords = this.accList.filter(acc => acc.isSelected);
        if (selectedRecords.length === 0) {
            console.log("没有选中任何记录");
            return;
        }

        try {
            // 调用Apex更新方法
            await updateSelectedAccounts({ selectedAccounts: selectedRecords });
            // 刷新wire数据，展示最新记录
            await refreshApex(this.wiredAccountsResult);
            console.log("更新成功");
        } catch (error) {
            let message = "更新失败";
            if (Array.isArray(error.body)) {
                message = error.body.map((e) => e.message).join(", ");
            } else if (typeof error.body.message === "string") {
                message = error.body.message;
            }
            console.error(message);
        }
    }
}

关键说明 #

• 实时字段更新：通过data-*属性标记字段名和索引，在onchange事件中直接修改accList数组，确保修改后的值能被捕获。
• Apex数据传递：accountWrap类的属性必须加@AuraEnabled，否则LWC无法将数据序列化传递给Apex。
• 数据刷新：使用refreshApex方法重新调用wire的Apex方法，更新组件中的数据展示。

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