Развертывание в sup-свойствах объекта в v-data-table - PullRequest
Новая
       23

Развертывание в sup-свойствах объекта в v-data-table

0 голосов
/ 04 февраля 2020

В основном мне нужно передать объект в качестве значения для всех столбцов в моей v-data-таблице.

Например, вместо: 

{
    name: 'Ice cream sandwich',
    calories: 237,
    fat: 9.0,
    carbs: 37
}

Мне нужно установить это в качестве примера элемента в "items": 

{
    name: 'Ice cream sandwich',
    calories: {value: 237, code: x},
    fat: {value: 9.0, code: y},
    carbs: {value: 37, code: z}
}

Я знаю, что с помощью шаблона я все еще могу отображать только значение, поскольку хочу отображать только значение, а не код: 

<div id="app">
    <v-app id="inspire">
        <v-data-table
            :headers="headers"
            :items="desserts"
            :page.sync="page"
            :items-per-page="itemsPerPage"
            hide-default-footer
            class="elevation-1"
            @page-count="pageCount = $event"
        >
            <template #item.calories="{item}">
                {{item.calories.value}}
            </template>
            <template #item.fat="{item}">
                {{item.fat.value}}
            </template>
            <template #item.carbs="{item}">
                {{item.carbs.value}}
            </template>
            <template #item.iron="{item}">
                {{item.iron.value}}
            </template>
        </v-data-table>
    </v-app>
</div>


<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      page: 1,
      pageCount: 0,
      itemsPerPage: 10,
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories'},
        { text: 'Fat', value: 'fat'},
        { text: 'Carb', value: 'carbs'},
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: {value: 159, score: 'x' },
          fat: {value: 80, score: 'y' },
          carbs: {value: 22, score: 'z' },
        }
      ]
    }
  },
})
</script>

Моя проблема в том, что в моей таблице будет много столбцов, и они являются динамическими c. («Заголовки» и «элементы» генерируются динамически из сервера.) Я бы предпочел не генерировать также большое количество (более 30) этих условий шаблона, но я не вижу сейчас никакого другого решения.

1 Ответ

0 голосов
/ 04 февраля 2020

Для этого вы можете использовать headers проп value. Vuetify принимает путь свойства здесь: 

headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories.value'}, <-- HERE
        { text: 'Fat', value: 'fat.value'},
        { text: 'Carb', value: 'carbs.value'},
      ],
...