Salesforce LWC如何动态获取父索引实现嵌套子行删除操作

实现方法 #

LWC支持在HTML元素上通过data-*前缀定义自定义属性传递参数，你可以将父级索引存入删除按钮的自定义属性中，点击时同时取出父、子两个索引即可定位到对应子行。

1. 修改模板代码 #

<template for:each={parentArray} for:item="parent" for:index="parentIndex">
    // 父行原有代码
    <template for:each={parent.childArray} for:item="child" for:index="childIndex">
          // 子行原有代码
          <td>
             <lightning-button-icon 
                icon-name="utility:delete" 
                data-parent-index={parentIndex}
                value={childIndex} 
                variant="bare" 
                onclick={handleRemove}>
            </lightning-button-icon>
          </td>
    </template>
</template>

2. 修改JS控制器逻辑 #

handleRemove(event) {
    // 分别获取父索引和子索引，注意转成数字类型
    const parentIndex = Number(event.currentTarget.dataset.parentIndex);
    const childIndex = Number(event.currentTarget.value);
    // 删除对应子行
    this.parentArray[parentIndex].childArray.splice(childIndex, 1);
    // 触发LWC响应式更新，保证页面同步渲染最新列表
    this.parentArray = [...this.parentArray];
}

注意事项 #

• 取值时必须使用event.currentTarget而非event.target，避免事件冒泡导致拿到子元素的属性值
• 从HTML属性中取出的索引默认是字符串类型，需要转为数字后再操作数组，避免出现异常
• 直接调用splice修改原数组无法触发LWC的响应式更新，需要对数组做一次重新赋值才会同步刷新页面

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