如何在Salesforce LWC中为对象字段添加复选框值并在数据表格展示？

一、前提准备：配置Salesforce对象字段 #

确保Desk__c自定义对象存在一个文本类型的Accessories__c字段（建议长度设为50以上，用于存储逗号分隔的配件字符串，比如mouse,screen）。

二、修改代码实现提交与展示逻辑 #

1. LWC JavaScript代码调整 #

（1）修复表格列配置

将columns数组中配件列的fieldName改为对应Salesforce字段名：

columns = [
    { label: 'ID', fieldName: 'Id', type: 'text' },
    { label: '工位名称', fieldName: 'Name', type: 'text' },
    { label: '关联配件', fieldName: 'Accessories__c', type: 'text' }
];

（2）修改提交方法，加入复选框值

在submitDesk方法中，将选中的配件拼接为字符串后，与工位信息一起传递给Apex：

submitDesk(){
    // 将复选框选中值转为逗号分隔字符串，绑定到desk对象的对应字段
    this.desk.Accessories__c = this.value.join(',');
    
    createDesk({desk:JSON.stringify(this.desk)})
    .then(data=> {
        this.retreiveDesk();
        // 成功提示
        const evt = new ShowToastEvent({
            title: "创建成功",
            message: `新工位已创建，ID：${data}`,
            variant: "success"
        });
        this.dispatchEvent(evt);
        // 重置表单
        this.desk = {};
        this.value = [];
    })
    .catch(error => {
        // 错误提示
        const evt = new ShowToastEvent({
            title: "创建失败",
            message: error.body.message,
            variant: "error"
        });
        this.dispatchEvent(evt);
    });
}

2. Apex控制器代码调整 #

修改getDesks方法，查询时包含Accessories__c字段，确保能取回配件数据：

@AuraEnabled
public static string getDesks(){
    try {
        List<Desk__c> desks = [SELECT Id, Name, Accessories__c FROM Desk__c];
        return JSON.serialize(desks);
    } catch (Exception e) {
        throw new AuraHandledException(e.getMessage());
    }
}

createDesk方法无需额外修改，JSON反序列化会自动将desk字符串中的Accessories__c字段映射到Desk__c对象的对应字段。

三、验证效果 #

1. 输入工位名称、勾选配件后点击提交，数据会完整存入Desk__c记录；
2. 提交完成后页面自动刷新列表，lightning-datatable的「关联配件」列会显示选中的配件（逗号分隔形式）。

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