Datamängdredigerare

Komponent: FCrudDataset
Status: Produktionsklar

Innehåll

Interaktiv tabell med redigering
Förpopulera objekt
Knappordning
Egna lägg till knappar
Datatabell med lägg till-knapp
Interaktiv tabell med knapp
Lista med redigering
Sorterbar lista
Anpassade texter
Textnycklar
API

Datamändgredigeraren används för att erbjuda användare funktionerna "lägg till", "ändra" och "ta bort" i en datamängd. Komponenten ansvarar inte för hur datamängden och åtgärderna "lägg till", "ändra" och "ta bort" presenteras. Vanligtvis används lista eller tabell för presentation men kan även vara egenutvecklad.

Om knappens visuella text för "ändra" och "ta bort" inte tydligt identifierar raden från andra rader, behöver knappen kompletteras med en text för skärmläsare. Beroende på sammanhang kan även knappen för "lägg till ny" behöva kompletteras med en skärmläsartext, som tydligör vad som läggs till.

Interaktiv tabell med redigering

<script lang="ts">
import { defineComponent } from "vue";
import {
    FCrudDataset,
    FInteractiveTable,
    FTableButton,
    FTableColumn,
    FTextField,
    FTextareaField,
} from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    components: {
        FCrudDataset,
        FInteractiveTable,
        FTableButton,
        FTableColumn,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

<template>
    <f-crud-dataset v-model="fruits" @created="saveModel" @updated="saveModel" @deleted="saveModel">
        <template #default="{ updateItem, deleteItem }">
            <f-interactive-table :rows="fruits" key-attribute="id">
                <template #caption> <b>Frukter</b> </template>
                <template #default="{ row }">
                    <f-table-column title="Namn" type="text" shrink>
                        {{ row.name }}
                    </f-table-column>
                    <f-table-column title="Land" type="text" shrink>
                        {{ row.origin }}
                    </f-table-column>
                    <f-table-column title="Beskrivning" type="text" expand>
                        {{ row.description }}
                    </f-table-column>
                    <f-table-column title="Åtgärd" type="action" shrink>
                        <f-table-button icon="pen" @click="updateItem(row)">
                            Ändra {{ row.name }}
                        </f-table-button>
                        <f-table-button icon="trashcan" @click="deleteItem(row)">
                            Ta bort {{ row.name }}
                        </f-table-button>
                    </f-table-column>
                </template>
            </f-interactive-table>
        </template>
        <template #modify="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
            ID {{ item.id }}
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.id"
                v-validation.required.maxLength="{ maxLength: { length: 4 } }"
                type="text"
            >
                ID
            </f-text-field>
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen radera fruken "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

Förpopulera objekt

Använd propen beforeCreate med en callback som returnerar ett objekt för att förpopulera data som ska läggas till. Callback anropas innan modalen visas.

<f-crud-dataset :before-create="onBeforeCreate">
    <template #default> ... </template>
</f-crud-dataset>

function onBeforeCreate(): MyInterface {
    return {
        /* ... */
    };
}

Knappordning

Standardinställningen för knappordningen i modalerna för "Lägg till" och "Ändra" är att primärknappen ligger först följt av sekundärknappen. Standardinställningen för modalen "Ta bort" är att sekundärknappen ligger först följt av primärknappen. Du kan ändra knappordningen för bekräftelsemodalen och därmed ändra knappordningen för modalen "Ta bort" genom inställning av buttonOrder i konfigurationen.

Egna lägg till knappar

Använd slotten #buttons för att lägga till egna anpassade lägg-till knappar. Du behöver själv hantera vad klick på knappen ska utföra för åtgärd.

 <f-crud-dataset>
     <template #default> ... </template>
+    <template #buttons="{ buttonClasses }">
+        <button type="button" :class="buttonClasses" @click="onClick">
+            My button
+        </button>
+    </template>
 </f-crud-dataset>

Datatabell med lägg till-knapp

<script lang="ts">
import { defineComponent } from "vue";
import { FCrudDataset, FDataTable, FTableColumn, FTextField, FTextareaField } from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    components: {
        FCrudDataset,
        FDataTable,
        FTableColumn,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

<template>
    <f-crud-dataset v-model="fruits" @created="saveModel" @updated="saveModel" @deleted="saveModel">
        <template #default>
            <f-data-table :rows="fruits" key-attribute="id">
                <template #caption> <b>Rättigheter</b> </template>
                <template #default="{ row }">
                    <f-table-column title="Namn" type="text" shrink>
                        {{ row.name }}
                    </f-table-column>
                    <f-table-column title="Land" type="text" shrink>
                        {{ row.origin }}
                    </f-table-column>
                    <f-table-column title="Beskrivning" type="text" expand>
                        {{ row.description }}
                    </f-table-column>
                </template>
            </f-data-table>
        </template>
        <template #add="{ item }">
            <f-text-field
                v-model="item.id"
                v-validation.required.maxLength="{ maxLength: { length: 4 } }"
                type="text"
            >
                ID
            </f-text-field>
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>
    </f-crud-dataset>
</template>

Interaktiv tabell med knapp

<script lang="ts">
import { defineComponent } from "vue";
import { FCrudDataset, FTextField, FInteractiveTable, FTableButton, FTableColumn } from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    name: "ExampleApp",
    components: {
        FCrudDataset,
        FTextField,
        FInteractiveTable,
        FTableButton,
        FTableColumn,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

<template>
    <f-crud-dataset v-model="fruits" @created="saveModel" @updated="saveModel" @deleted="saveModel">
        <template #default="{ updateItem }">
            <f-interactive-table :rows="fruits" key-attribute="id">
                <template #caption> <b>Frukter</b> </template>
                <template #default="{ row }">
                    <f-table-column title="Namn" type="text" shrink>
                        {{ row.name }}
                    </f-table-column>
                    <f-table-column title="Land" type="text" shrink>
                        {{ row.origin }}
                    </f-table-column>
                    <f-table-column title="Beskrivning" type="text" expand>
                        {{ row.description }}
                    </f-table-column>
                    <f-table-column title="Åtgärd" shrink type="action">
                        <f-table-button icon="pen" label @click="updateItem(row)">
                            Ändra <span class="sr-only"> {{ row.name }} </span>
                        </f-table-button>
                    </f-table-column>
                </template>
            </f-interactive-table>
        </template>
        <template #modify="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
        </template>
    </f-crud-dataset>
</template>

Lista med redigering

<script lang="ts">
import { defineComponent } from "vue";
import { FCrudDataset, FIcon, FList, FStaticField, FTextField, FTextareaField } from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    components: {
        FCrudDataset,
        FIcon,
        FList,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, parseInt(item.id, 10));
            }, 0);
        },
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

<template>
    <f-crud-dataset
        v-model="fruits"
        data-test="f-crud-dataset-list-example"
        :before-create="beforeCreate"
        @created="saveModel"
        @updated="saveModel"
        @deleted="saveModel"
    >
        <template #default="{ updateItem, deleteItem }">
            <f-list :items="fruits" element-id="example" key-attribute="id" selectable>
                <template #default="{ item }">
                    <h3>{{ item.name }}</h3>
                    <div class="row">
                        <div class="col col--md-7">
                            <p>
                                Land:
                                <em> {{ item.origin }} </em>
                                <br />
                                Beskrivning:
                                <em> {{ item.description }} </em>
                                <br />
                            </p>
                        </div>
                        <div class="col col--md-5">
                            <ul class="button-list">
                                <li>
                                    <button
                                        type="button"
                                        class="button button--small button--tertiary"
                                        @click="updateItem(item)"
                                    >
                                        <f-icon class="button__icon" name="pen"></f-icon>
                                        Ändra <span class="sr-only">{{ item.name }}</span>
                                    </button>
                                </li>
                                <li>
                                    <button
                                        type="button"
                                        class="button button--small button--tertiary"
                                        @click="deleteItem(item)"
                                    >
                                        <f-icon class="button__icon" name="trashcan"></f-icon>
                                        Ta bort <span class="sr-only">{{ item.name }}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </template>
                <template #screenreader="{ item }"> Frukt ID {{ item.id }} </template>
            </f-list>
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen radera frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

Sorterbar lista

<script lang="ts">
import { defineComponent } from "vue";
import {
    FCrudDataset,
    FIcon,
    FList,
    FSortFilterDataset,
    FStaticField,
    FTextField,
    FTextareaField,
} from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    components: {
        FCrudDataset,
        FIcon,
        FList,
        FSortFilterDataset,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, parseInt(item.id, 10));
            }, 0);
        },
    },
});
</script>

<template>
    <f-crud-dataset v-model="fruits" :before-create="beforeCreate">
        <template #default="{ updateItem, deleteItem }">
            <f-sort-filter-dataset
                :data="fruits"
                :sortable-attributes="{
                    name: 'Namn',
                    origin: 'Land',
                }"
            >
                <template #default="{ sortFilterResult }">
                    <f-list :items="sortFilterResult" key-attribute="id">
                        <template #default="{ item }">
                            <h3>{{ item.name }}</h3>
                            <div class="row">
                                <div class="col col--lg-10">
                                    Land:
                                    <em> {{ item.origin }} </em>
                                    <br />
                                    Beskrivning:
                                    <em> {{ item.description }} </em>
                                    <br />
                                </div>
                                <div class="col col--sm-1">
                                    <button
                                        type="button"
                                        class="button button--small button--tertiary"
                                        @click="updateItem(item)"
                                    >
                                        <f-icon class="button__icon" name="pen">
                                            <title>Ändra {{ item.name }}</title>
                                        </f-icon>
                                    </button>
                                </div>
                                <div class="col col--sm-1">
                                    <button
                                        type="button"
                                        class="button button--small button--tertiary"
                                        @click="deleteItem(item)"
                                    >
                                        <f-icon class="button__icon" name="trashcan">
                                            <title>Ta bort {{ item.name }}</title>
                                        </f-icon>
                                    </button>
                                </div>
                            </div>
                        </template>
                    </f-list>
                </template>
            </f-sort-filter-dataset>
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen ta bort frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

Anpassade texter

Rubriker i modaler kan anpassas antingen med textnycklar (standardtexter för alla datamängdredigerare) eller med propar (för en specifik datamängdredigerare):

Lägg till: textnyckel fkui.crud-dataset.modal.header.add eller prop addNewModalHeader.
Ändra: textnyckel fkui.crud-dataset.modal.header.modify eller prop modifyModalHeader.
Ta bort: textnyckel fkui.crud-dataset.modal.header.delete eller prop deleteModalHeader.

Knapptexter i modaler kan anpassas med textnycklar.

Lägg till: textnycklar fkui.crud-dataset.modal.confirm.add och fkui.crud-dataset.modal.cancel.add.
Ändra: textnycklar fkui.crud-dataset.modal.confirm.modify och fkui.crud-dataset.modal.cancel.modify.
Ta bort: textnycklar fkui.crud-dataset.modal.confirm.delete och fkui.crud-dataset.modal.cancel.delete.

Knappentexten för "Lägg till" kan anpassas med textnyckel fkui.crud-dataset.button.add eller slotten add-button.

Knapptexter för åtgärdsknappar kan anpassas med textnycklar eller med knappens default slot.

Ändra: textnyckel fkui.crud-button.modify eller default slot.
Ta bort: textnyckel fkui.crud-button.delete eller default slot.

<script lang="ts">
import { defineComponent } from "vue";
import { FCrudDataset, FIcon, FList, FStaticField, FTextField, FTextareaField } from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    name: "ExampleApp",
    components: {
        FCrudDataset,
        FIcon,
        FList,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, parseInt(item.id, 10));
            }, 0);
        },
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

<template>
    <f-crud-dataset
        v-model="fruits"
        :before-create="beforeCreate"
        add-new-modal-header="Lägg till ny frukt"
        modify-modal-header="Ändra land"
        delete-modal-header="Vill du ta bort frukten?"
        @created="saveModel"
        @updated="saveModel"
        @deleted="saveModel"
    >
        <template #default="{ updateItem, deleteItem }">
            <f-list :items="fruits" element-id="example" key-attribute="id">
                <template #default="{ item }">
                    <div class="row">
                        <div class="col col--lg-7 col--md-6">
                            <h3>{{ item.name }}</h3>
                            <p>
                                Land:
                                <em> {{ item.origin }} </em>
                                <br />
                                Beskrivning:
                                <em> {{ item.description }} </em>
                                <br />
                            </p>
                        </div>
                        <div class="col col--lg-5 col--md-6">
                            <div class="row row--align-end">
                                <div class="col">
                                    <button
                                        type="button"
                                        class="button button--small button--tertiary"
                                        @click="updateItem(item)"
                                    >
                                        <f-icon class="button__icon" name="pen"></f-icon>
                                        Ändra <span class="sr-only">{{ item.name }}</span>
                                    </button>
                                </div>
                                <div class="col">
                                    <button
                                        type="button"
                                        class="button button--small button--tertiary"
                                        @click="deleteItem(item)"
                                    >
                                        <f-icon class="button__icon" name="trashcan"></f-icon>
                                        Ta bort <span class="sr-only">{{ item.name }}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template #screenreader="{ item }"> Frukt ID {{ item.id }} </template>
            </f-list>
        </template>
        <template #add-button> Lägg till ny <span class="sr-only"> frukt </span> </template>
        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen ta bort frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

Textnycklar

Läs mer om att anpassa och översätta text.

fkui.crud-dataset.modal.header.add

‐

Default: "Lägg till rad"

fkui.crud-dataset.modal.header.modify

‐

Default: "Ändra rad"

fkui.crud-dataset.modal.header.delete

‐

Default: "Är du säker på att du vill ta bort raden?"

fkui.crud-dataset.modal.confirm.add

"Save" button in "add new" modal"

Default: "Lägg till"

fkui.crud-dataset.modal.confirm.modify

"Save" button in "modify" modal

Default: "Spara"

fkui.crud-dataset.modal.cancel.add

"Cancel" button in "add new" modal

Default: "Avbryt"

fkui.crud-dataset.modal.cancel.modify

"Cancel" button in "modify" modal

Default: "Avbryt"

fkui.crud-dataset.modal.confirm.delete

"Confirm" button in "delete" modal

Default: "Ja, ta bort"

fkui.crud-dataset.modal.cancel.delete

"Cancel" button in "delete" modal

Default: "Nej, avbryt"

fkui.crud-dataset.aria-live.delete

Text announced to screenreaders when an item has been removed

Default: "Raden har tagits bort"

fkui.crud-dataset.aria-live.add

Text announced to screenreaders when an item has been added

Default: "En rad har lagts till"

fkui.crud-dataset.aria-live.modify

Text announced to screenreaders when an item has been modified

Default: "Raden har ändrats"

fkui.crud-dataset.button.add

Buttontext for adding a new item

Default: "Lägg till ny"

fkui.crud-dataset.modal.close

‐

Default: "Stäng"

fkui.crud-button.delete

Button label when action is "delete"

Default: "Ta bort"

fkui.crud-button.modify

Button label when action is "modify"

Default: "Ändra"

API

`FCrudDataset`

Props

v-model: T[] Optional

The list of items that should be deleted, modified or added to. If the prop is not set an empty array will be used.

Default: () => []

beforeCreate: (() => T) | undefined Optional

A function that returns an item to the #add template. Can be used to populate data that the user should not input themself e.g. an id. Or to give the user suggestions for inputs. If the prop is not used an empty item will be returned.

Default: undefined

primaryButtonRight: boolean Optional

If true the primary button in the modals will be placed to the right side instead of to the left.

Default: false

beforeSubmit: FValidationFormCallback Optional

If given, this function is called before the [[submit]] event is emitted. See <f-validation-form> beforeSubmit props for more info.

Default: function() { /* do nothing */ }

beforeValidation: FValidationFormCallback Optional

If given, this function is called before the form data is validated and the [[submit]] event is emitted. See <f-validation-form> beforeValidation props for more info.

Default: function() { /* do nothing */ }

onCancel: () => void Optional

If given, this function is called after the modal has been closed.

Default: function() { return undefined; }

addNewModalHeader: string Optional

Property for changing the "add new" modal heading

Default: TranslationService.provider.translate("fkui.crud-dataset.modal.header.add", "Lägg till rad")

modifyModalHeader: string Optional

Property for changing the "modify" modal heading

Default: TranslationService.provider.translate("fkui.crud-dataset.modal.header.modify", "Ändra rad")

deleteModalHeader: string Optional

Property for changing the "delete" modal heading

Default: TranslationService.provider.translate( "fkui.crud-dataset.modal.header.delete", "Är du säker på att du vill ta bort raden?", )

Events

created

Emitted when an item is added.

Arguments:

item: T — the added item.

deleted

Emitted when an item is deleted.

Arguments:

item: T — the deleted item.

updated

Emitted when an item is updated.

Arguments:

item: T — the updated item.

Slots

default

Slot for displaying the data.

Bindings:

updateItem: (item: T) => void — Callback to trigger modification modal
deleteItem: (item: T) => void — Callback to trigger deletion modal

add-button

Slot for changing the text in "Add new" button`

buttons

Slot for additional add buttons

Bindings:

buttonClasses: string[] — Default button classes.

add

Slot for inputs when creating a new item. The new item is available through v-slot="{ item }". If any data in the item should be set not by the user the prop beforeCreate can be used to set that data.

Bindings:

item: T — Item returned by beforeCreate or an empty object.

modify

Slot for inputs when modifying an item. The item being modified is available through v-slot="{ item }".

Bindings:

item: T — A clone of the current item.

delete

Slot for displaying a warning message before an item is deleted. The item being deleted is available through v-slot="{ item }".

Bindings:

item: T — Item about to be deleted.

`FCrudButton`

Komponenten är deprekerad. Läs mer om att migrera FCrudButton.

Kakor på webbplatsen

Datamängdredigerare