web-dev-qa-db-fra.com

Comprendre les «éléments par rangée par page» dans Vuetify Data iterators + Data Tables, puis-je définir la page par défaut?

À Vuetify docs pour les tables de données , et docs pour les itérateurs de données je n'arrive pas à comprendre le rows-per-page-items utilisation de prop et ses options, ni trouver une explication dans les détails à un autre endroit.

Je veux spécifiquement savoir que si l’on pouvait utiliser l’accessoire en question pour définir le montant par lignes-par-page choisi sur autre que le premier dans la sélection.

Par exemple, une liste déroulante:

Items per page:  10
                [20] -> Selected by default
                 30
                 40

Je sais que je peux faire:

Items per page: [20] -> First, so will be selected by default
                 10
                 30
                 40

Faire:

<v-data-iterator :rows-per-page-items="[20, 10, 30, 40]" ... />

Mais ce qui précède n’est pas idéal, au sens UX.

Je vous remercie!

vue.jsvuetify.js
15
Nati Mask

Vous pouvez définir la propriété de données comme suit (si vous utilisez une structure de modèle):

rowsPerPageItems: [10, 20, 30, 40],
pagination: {
    rowsPerPage: 20
},

et les accessoires de votre balise de composant:

<v-data-iterator
    :rows-per-page-items="rowsPerPageItems"
    :pagination.sync="pagination"
    ... />

La valeur prop "pagination - lignes par page" définit votre valeur par défaut.

29
Ollywood

Pour tous ceux qui utilisent vuetify 2.0, vous devez utiliser le prop de pied de page sur la table de données, comme suit:

<v-data-table
  :headers="headers"
  :items="items"
  :footer-props="{
    'items-per-page-options': [10, 20, 30, 40, 50]
  }"
  :items-per-page="30"
  :search="search"
>
12
Origin

Pour vue tableau de données

<v-data-table
        v-model="selected"
        :headers="headers"
        :items="items"
        select-all
        item-key="name"
        class="elevation-1"
        :rows-per-page-items="[20, 10, 30, 40]"
      >
0
Atchutha rama reddy Karri