The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, and row selection.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
The show-select prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default row. You can customize these with the slots header.data-table-select and item.data-table-select respectively. You can also switch between allowing multiple selected rows at the same time or just one with the single-select prop.
Using the group-by and group-desc props you can group rows on an item property. The show-group-by prop will show a group button in the default header. You can use the groupable property on header items to disable the group button.
Using the multi-sort prop will enable you to sort on multiple columns at the same time. When enabled, you can pass arrays to both sort-by and sort-desc to programmatically control the sorting, instead of single values.
The data table exposes a search prop that allows you to filter your data.
You can use the loading prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the loading-text prop or the loading slot.
Using the dense prop you are able to give your data tables an alternate style.
You can easily disable specific columns from being included when searching through table rows by setting the property filterable to false on the header item(s). In the example below the dessert name column is no longer searchable.
La table v-data-table fournit un grand nombre de emplacements pour personnaliser la table. Cet exemple présente quelques-uns de ces emplacements et ce que vous pouvez faire avec chacun. Il est important de noter un emplacement (par exemple : item/body/header) va complètement reprendre le rendu interne du composant qui vous demandera de réinstaller les fonctionnalités telles que la sélection et l'extension. Certains emplacements vont se substituer les uns aux autres comme : body > item > item.<name> et header/header.<name>.
When wanting to use a checkbox component inside of a slot template in your data tables, use the v-simple-checkbox component rather than the v-checkbox component. The v-simple-checkbox component is used internally and will respect header alignment.
The show-expand prop will render an expand icon on each default row. You can customize this with the item.data-table-expand slot. The position of this slot can be customized by adding a column with value: 'data-table-expand' to the headers array. You can also switch between allowing multiple expanded rows at the same time or just one with the single-expand prop. The expanded rows are available on the synced prop expanded.sync
Vous pouvez remplacer le filtrage par défaut utilisé avec la prop search en fournissant une fonction à la propcustom-filter. Si vous avez besoin de personnaliser le filtrage sur une colonne spécifique, vous pouvez fournir une fonction à la propriété filter sur les éléments d'en-tête. La signature est (value: any, search: string | null, item: any) => boolean. Cette fonction sera toujours exécutée même si la prop search n'a pas été fournie. Ainsi vous devez vous assurer avant de quitter de laisser une valeur de true si le filtre ne doit pas être appliqué.
You can use the dynamic slots header.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers.
You can use the dynamic slots item.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers. So to customize the calories column we're using the item.calories slot.
Pagination can be controlled externally by using the individual props, or by using the options prop. Remember that you must apply the .sync modifier.
Sorting can also be controlled externally by using the individual props, or by using the the options prop. Remember that you must apply the .sync modifier.
Si vous chargez des données déjà paginées et triées depuis un backend, vous pouvez utiliser la propserver-items-length. Définir cette prop désactivera le tri et la pagination intégrés, et vous devrez plutôt utiliser les événements disponibles (update:page, update:sortBy, update:options, etc) pour savoir quand demander de nouvelles pages depuis votre backend. Utilisez la prop loading pour afficher une barre de progression lors de la récupération des données.
The v-edit-dialog component can be used for editing data directly within a v-data-table. You can block the closing of the v-edit-dialog when clicked outside by adding the persistent prop.
v-data-table with CRUD actions using a v-dialog component for editing each row
Prêt pour plus ? Continuez la lecture avec :