8
votes

Comment définir la valeur initiale 'lignes par page' dans le composant Vuetify DataTable?

J'ai une page avec le composant Vuetify DataTable (Vuetify 1.5.7) et utilisant la pagination du composant par défaut. J'ai défini les valeurs de sélection "Lignes par page" à l'aide de la propriété: rows-per-page-items.

Je souhaite maintenant définir la valeur initiale à partir de ce tableau de lignes par page ( pas seulement le premier un! ) en entrant dans la page.

Est-ce possible et comment puis-je faire cela?

Exemple de code de tableau ci-dessous:

<v-data-table
            :headers="headers"
            :items="equipment"
            class="elevation-1"
            :rows-per-page-items='[15, 30, 50, 100]'>
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
      </template>
</v-data-table>

vue.js vuetify.js

0 commentaires

3 Réponses :

9
votes

Utilisez pagination.sync pour contrôler la pagination:

<v-data-table
            :headers="headers"
            :items="equipment"
            class="elevation-1"
            :rows-per-page-items="[15, 30, 50, 100]"
            :pagination.sync="pagination">
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
      </template>
</v-data-table>
...
data() {
  return {
    pagination: {
      rowsPerPage: 30
    }, ...
  }
}

[ https://jsfiddle.net/95yf1xe8/ ]

1 commentaires

comment ajouter l'option "Tous" à l'élément lignes par page?

15
votes

Au cas où quelqu'un rencontrerait ça mais le voudrait pour vuetify 2

Il a changé pour utiliser les accessoires de pied de page

:footer-props="{'items-per-page-options':[15, 30, 50, 100, -1]}"

avec -1 pour tout p >

Voir l'API dans vuetify docs avec les accessoires de pied de page dans le composant v-data-footer de l'API de tables.

0 commentaires

2
votes

Voici l'interface actuelle à partir de la version 2.3.4+:

<v-data-table
   ....
   :footer-props="{'items-per-page-options':[2,15, 30, 50, 100, -1]}"
   :options="options">
   ....
</v-data-table>
...
data() {
  return {
    options: {
      itemsPerPage: 100
    }, ...
  }
}

0 commentaires