Lightning自定义数据表格点击编辑无法获取Record Id问题

在自定义Lightning数据表格中，通过自定义列类型集成编辑功能，已将record id作为属性传递，在connectedCallback和renderedCallback中能正确获取到record id，但点击编辑图标调用handleEdit方法时，无法捕获对应行的记录ID。

问题原因与解决方案 #

• 问题根源：lightning-button-icon组件不支持直接通过id属性绑定值并在事件中获取，且因LWC的组件封装机制，事件的currentTarget可能出现null，导致无法读取属性。
• 推荐方案1：使用data-*自定义属性存储record id，通过事件对象的dataset属性读取
• 备选方案2：绑定事件时通过箭头函数直接传递record id（大量数据行场景下需谨慎，避免性能损耗）

修改后的代码示例 #

方案1：使用data属性存储ID #

<lightning-button-icon 
    icon-name="utility:edit"  
    alternative-text="Edit" 
    title="Edit" 
    variant="container" 
    onclick={handleEdit} 
    key={accountId} 
    data-record-id={accountId}>
</lightning-button-icon>

connectedCallback(){
    console.log('connected  ', this.accountId);
}
renderedCallback(){
    console.log('rendered ', this.accountId);
}

handleEdit(event){        
    const recordId = event.currentTarget.dataset.recordId;
    console.log('记录ID:', recordId);
}

方案2：箭头函数直接传递参数 #

<lightning-button-icon 
    icon-name="utility:edit"  
    alternative-text="Edit" 
    title="Edit" 
    variant="container" 
    onclick={() => this.handleEdit(accountId)} 
    key={accountId}>
</lightning-button-icon>

connectedCallback(){
    console.log('connected  ', this.accountId);
}
renderedCallback(){
    console.log('rendered ', this.accountId);
}

handleEdit(recordId){        
    console.log('记录ID:', recordId);
}

注意：方案2在数据表格行数较多时，会为每一行创建新的函数实例，可能影响组件性能，此时优先选择方案1。

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