Välja rader i tabell (kod)
Flerval
Använd selectable="multi" för att låta användaren välja flera rader i tabellen.
Valda rader exponeras genom v-model:selected-rows.
const selectedRows = ref<Row[]>([]);
<f-table
v-model:selected-rows="selectedRows"
:columns
:rows
selectable="multi"
></f-table>
selectedRows innehåller de radobjekt som användaren har valt.
Bulkoperation
Vid flerval kan du utföra bulkoperationer på de valda raderna.
Om användaren kan ta bort innehåll från tabellen bör du låta användaren bekräfta åtgärden innan den genomförs.
const selectedRows = ref<Row[]>([]);
const { confirmModal } = useModal();
async function removeSelected(): Promise<void> {
const selectedCount = selectedRows.value.length;
const selectedFruitText =
selectedCount === 1 ? "vald frukt" : "valda frukter";
if (selectedRows.value.length === 0) {
return;
}
const confirmed = await confirmModal({
heading: "Ta bort frukt(er)",
content: `Är du säker att du vill ta bort ${selectedCount} ${selectedFruitText}?`,
confirm: "Ja, ta bort",
dismiss: "Nej, behåll",
});
if (confirmed) {
removeDatasetRows(rows, selectedRows);
}
}
<f-button @click="removeSelected"> Ta bort valda </f-button>
<f-table
v-model:selected-rows="selectedRows"
:columns
:rows
selectable="multi"
></f-table>
Läs mer om att lägga till och ta bort rader.
Enkelval
Använd selectable="single" för att låta användaren välja en rad i taget.
Vid enkelval innehåller selectedRows högst en rad.
const selectedRows = ref<Row[]>([]);
<f-table
v-model:selected-rows="selectedRows"
:columns
:rows
selectable="single"
></f-table>