es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo eliminar filas anidadas en Salesforce LWC?

05 Jun, 2023 Programación

¿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?
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    <template for:each="{parentArray}" for:item="parent" for:index="pIndex">
    <!-- Código para filas de padres -->
    <template for:each="{parent.childArray}" for:item="child" for:index="cIndex">
        <!-- Código para filas de hijos -->
        <tr key="{child.id}" data-parent-index="{pIndex}" data-child-index="{cIndex}">
            <td>{child.name}</td>
            <td>
                <lightning-button-icon icon-name="utility:delete" variant="bare" value="{cIndex}" onclick="{e" ==""> handleRemove(e, pIndex)}>
                </lightning-button-icon>
            </td>
        </tr>
    </template>
</template>

    Aquí hemos agregado dos atributos de datos: data-parent-index y data-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ón handleRemove() 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:

    handleRemove(event, parentIndex) {
    const childIndex = event.target.dataset.childIndex;
    const parent = this.parentArray[parentIndex];
    parent.childArray.splice(childIndex, 1);
}

    Aquí, primero recuperamos el índice del hijo de la propiedad dataset del objetivo del evento. Luego usamos el parámetro parentIndex para recuperar el objeto padre de parentArray. Finalmente, usamos el método splice() para eliminar el elemento hijo del childArray del padre.

Comments are closed.