Vuetify таблица данных универсальный компонент - PullRequest
Новая
       15

Vuetify таблица данных универсальный компонент

0 голосов
/ 25 июня 2018 
<template>
  <v-data-table
    :headers="this.headers"
    :items="this.items"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data () {
    return {
      items: [],
      headers: [],
      attributes: []
    }
  },
  methods: {
    loadItems (items) {
      items.forEach(item => {
        var counter = 0
        var obj = `{\n`
        attributes.forEach(attribute => {
          obj += '"' + attribute + '" : ' + item[counter]
          if (counter < attributes.lenght)
            obj += ',\n'
          else
            obj += '\n'
          counter++;
        })
        obj += '}'
        this.items.push(obj)
      })
    },
    loadHeaders (headers) {
      headers.forEach(header => {
        this.headers.push({ text: header, value: header.toLowerCase()})
        this.attributes.push(headers)
      })
    },
    loadTable (items, headers) {
      this.loadHeaders(headers)
      this.loadItems(items)
    }
  }
}
</script>

<style scoped>
</style>

Будут ли эти функции работать для динамического построения таблицы данных с пользовательскими элементами и заголовками? Я хочу создать компонент таблицы данных, который будет универсальным для каждой таблицы данных из моей базы данных SQLlite3. Как изменить шаблон для отображения пользовательских атрибутов элементов из массива атрибутов?

...