Как сгенерировать таблицу данных Dynami c через вызов API в vuetify в vuejs - PullRequest
Новая
       19

Как сгенерировать таблицу данных Dynami c через вызов API в vuetify в vuejs

0 голосов
/ 23 апреля 2020

Я пытаюсь сгенерировать динамическую c таблицу данных через Vuetify, в vuejs, но не вижу никакого примера в официальной документации vuetify, кто-нибудь возражает поделиться примером

1 Ответ

0 голосов
/ 24 апреля 2020

Под "Dynami c" я предполагаю, что вы имеете в виду данные загружаются асинхронно из API. Документы Vuetify содержат многочисленные примеры таблиц данных , включая , которые имитируют запрос данных из API . Очень базовая c реализация выглядит примерно так (примечание: в этом примере используется API генератора случайных пользователей : 

<template>
  <v-data-table
    :headers="headers"
    :items="people"
    item-key="login.uuid"
    :loading="loading"
    :options.sync="options"
    :server-items-length="totalPeople"
    @pagination="updatePage"
    @update:options="customSort"
  ></v-data-table>
</template>

<script>
import axios from 'axios'
export default {
  data: () => ({
    apiURL: 'https://randomuser.me/api/',
    headers: [
      { text: 'Name',     value: 'name', align: 'start' },
      { text: 'Country',  value: 'country' },
      { text: 'DOB (Age)',      value: 'dob' },
      { text: 'Contacts', value: 'contacts' },
    ],
    loading: false,
    options: {
      page: 1,
      itemsPerPage: 10,
      sortBy: ['name'],
      sortDesc: [true],
    },
    people: [],
  }),
  mounted () {
    this.getPeople()
  },
  methods: {
    async getPeople (page = 1, results = 10, seed = 'example') {
      this.loading = true
      const params = { params: { page, results, seed } }
      try {
        this.people = (await axios.get(this.apiURL, params)).data.results
        this.loading = false
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    updatePage (pagination) {
      const { itemsPerPage: results, page } = pagination
      this.pagination = pagination
      this.getPeople({ page, results })
    },
    customSort (options) {
      // The Random User API does NOT support sorting, but if it did, you
      // would need to make an API call that returned a sorted
      // list of results based on the sort parameter(s)
      console.log(options)
    },
  },
}
</script>

Для более сложного примера, который использует больше возможностей Vuetify, проверить этот код ручки .

...