Estoy tratando de implementar la funcionalidad de selección de filas para el componente esbelto que estoy desarrollando. Estoy creando un componente usando un componente de tabla esbelta donde enumero los elementos de la base de datos y el componente debe permitir la selección de solo dos elementos y eliminar la primera fila cuando se agrega la tercera. Luego, las identificaciones de fila se registran en la tienda Svelte y se pasan a otro componente. Todo esto funciona a nivel de programa, eso no es un problema. El problema es resaltar las filas correctas en la tabla para que el usuario esté en el mapa con las filas seleccionadas. Puedo hacer que el resaltado funcione usando la propiedad classNameRowSelected en svelte-table, pero el problema es eliminar el resaltado de la primera fila seleccionada cuando se selecciona la tercera fila. Parece que no encuentro ningún ejemplo o referencia sobre cómo hacer esto desde Javasctipt ...
Aquí está mi elemento SvelteTable:
<SvelteTable columns="{COLUMNS}" rows="{rows}" rowKey="key" selectOnClick="{true}" on:clickRow="{rowSelected}" classNameTable={['table table-striped']} classNameThead={['table-primary']} classNameRowSelected="row-selected" /> <style> :global(.row-selected) { background-color: #f8c; } </style>y se hace clic en la función rowSelected y luego se hace clic en la fila:
function rowSelected(event) { let found = false; compare_tests.forEach((test,index, compare_tests) => { console.log(test); if (test == event.detail.row.key) { found = true; event.detail.row.selected = false; compare_tests[index] = ""; } }); if (!found) { compare_tests.shift(); compare_tests.push(event.detail.row.key); event.detail.row.selected = true; found = false; } $testids = compare_tests; }Idealmente, hay alguna función/propiedad en el parámetro "fila" que puedo usar para anular la selección de la fila en función de la clave de fila antes de alejarla de la matriz. Soy relativamente nuevo en JavaScript y Svelte, por lo que agradecería cualquier ayuda para encontrar información sobre cómo lograr esto.
Al usar selected (‡ matriz opcional de valores clave de filas seleccionadas) en lugar de selectOnClick , esta sería una forma >> REPL
<script> import SvelteTable from "svelte-table"; import {rows, columns} from './data' let selectedRowIds = [] function handleRowClick(event) { const rowId = event.detail.row.id if(selectedRowIds.includes(rowId)) { selectedRowIds = selectedRowIds.filter(id => id !== rowId) } else { selectedRowIds = [rowId, ...selectedRowIds].slice(0,2) } } </script> <SvelteTable columns="{columns}" rows="{rows}" rowKey="id" on:clickRow={handleRowClick} selected={selectedRowIds} classNameRowSelected="row-selected" > </SvelteTable> <style> :global(.row-selected) { background-color: #f8c; } </style>