Vuetify à l'Aide de datatable avec des données externes à partir d'une API avec Vuex
Je veux utiliser le vuetify cadre avec Vuex , mais il existe peu de documentation sur son utilisation avec Vuex.
Je veux:
- Obtenir des données à partir d'une API externe ( mais seulement les données nécessaires )
- Puis Enregistrez les données dans l'état et les modifier ou que ce soit
- Puis poussez les modifications apportées à l'api
J'ai essayé quelques-uns des externes de la pagination et des exemples de tri avec vuetify , mais je ne peux pas le faire pour afficher tous les enregistrements compte, à moins que j'ai coder en dur elle.
Je suis tout à fait nouvelle à Vue et Vuetify , donc je suis peut-être un malentendu quelque chose.
<template>
<div>
<v-data-table
:headers='headers'
:items='items'
:length='pages'
:search='search'
:pagination.sync='pagination'
:total-items='totalItemCount'
class='elevation-1'
>
<template slot='items' slot-scope='props'>
<td class='text-xs-right'>{{ props.item.id }}</td>
<td class='text-xs-right'>{{ props.item.first_name }}</td>
<td class='text-xs-right'>{{ props.item.last_name }}</td>
<td class='text-xs-right'>{{ props.item.avatar }}</td>
</template>
</v-data-table>
</div>
</template>
<script>
import moment from 'moment'
import axios from 'axios'
export default {
name: 'test-table',
watch: {
pagination: {
async handler () {
const rowsPerPage = this.pagination.rowsPerPage
//const skip = (this.pagination.page - 1) * rowsPerPage
const pageNumber = this.pagination.page
const res = await axios.get(`https://reqres.in/api/users?page=${pageNumber}&per_page=${rowsPerPage}`)
this.items = res.data.data
this.$store.commit('saveTableData', this.items)
},
deep: true
}
},
computed: {
pages () {
return 171
},
totalItemCount () {
return 400
}
},
async mounted () {
const rowsPerPage = this.pagination.rowsPerPage
const skip = (this.pagination.page - 1) * rowsPerPage
const res = await axios.get(`https://reqres.in/api/users?page=${skip}&per_page=${rowsPerPage}`)
this.items = res.data.data
this.$store.commit('saveTableData', this.items)
},
methods: {
nzDate: function (dt) {
return moment(dt).format('DD/MM/YYYY')
}
},
data: () => ({
search: '',
//totalItems: 0,
items: [],
pagination: {
sortBy: 'Date'
},
headers: [
{ text: 'ID', value: 'id' },
{ text: 'First Name', value: 'first_name' },
{ text: 'Last Name', value: 'last_name' },
{ text: 'Avatar', value: 'avatar' }
]
})
}
Vous devez vous connecter pour publier un commentaire.
C'est mon travail d'installation:
Je n'ai pas tout mettre. Si vous manquez une partie spécifique de demander à nouveau, et je mettrai à jour mon exemple. Un conseil: Vous devriez éviter de
watch
deep
dans la mesure du possible. Il peut entraîner de lourds calculs.props.selected
? A-t-elle être définie dans le magasin?selected
tableau contient toutes les lignes sélectionnées de cette table.props.selected
juste ajoute un bel effet de base, lorsqu'une ligne est sélectionnée.