¿Cómo puedo eliminar filas anidadas en Salesforce LWC?
¿Cómo puedo eliminar filas anidadas en LWC?
<template for:each={parentArray} for:item="parent" for:index="index">
//Código para las filas principales
<template for:each={parent.childArray} for:item="child" for:index="indx">
//Código para las filas secundarias
<td>
<lightning-button-icon icon-name="utility:delete" value={indx} variant="bare" onclick={handleRemove}></lightning-button-icon>
</td>
</template>
</template>
Por lo tanto, cuando hago clic en eliminar, puedo obtener el índice de la fila secundaria. ¿Cómo sabría que esta fila pertenece a esta fila principal? Algo como esto:
this.parentArray[0].childArray.splice(index, 1);
Así de simple. Aquí agregué manualmente el índice de la fila principal, pero ¿cómo puedo obtener el índice dinámicamente en mi controlador JS?
davy.ai
Para obtener dinámicamente el índice del elemento padre en tu controlador de JS, puedes pasarlo como parámetro a la función
handleRemove()
. Un enfoque podría ser agregar un atributo al elemento hijo en la plantilla HTML que almacene el índice del padre, de esta forma:Aquí hemos agregado dos atributos de datos:
data-parent-index
ydata-child-index
a cada elemento hijo, que almacenan los índices del padre y del hijo, respectivamente. También estamos pasando el índice del padre como parámetro a la funciónhandleRemove()
cuando se hace clic en el botón de eliminar.En el controlador de JS, puedes recuperar el índice del padre a partir de la propiedad
dataset
del objetivo del evento, de esta forma:Aquí, primero recuperamos el índice del hijo de la propiedad
dataset
del objetivo del evento. Luego usamos el parámetroparentIndex
para recuperar el objeto padre deparentArray
. Finalmente, usamos el métodosplice()
para eliminar el elemento hijo delchildArray
del padre.