Question

<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数据库中的每个数据表都是通用的。如何更改模板以显示来自属性数组的项目的自定义属性？

Vuetify数据表通用组件

0 个答案: