Динамическое построение таблицы с использованием таблицы данных vuetifyJS

Ответ 1

Я рассматривал тот же вопрос, нашел типичный способ избежать жесткого кодирования структуры данных в разметке; вы можете использовать содержимое заголовков для создания сценария шаблона элемента с помощью цикла v-for:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      class="elevation-1"
    >
      <template slot="items" slot-scope="myprops">
        <td v-for="header in headers">
        {{ myprops.item[header.value] }}
        </td>
      </template>
    </v-data-table>
  </v-app>
</div>

Ответ 2

Вот что вы можете попробовать, я знаю, что это работает, поскольку я использовал подобный подход. Но чтобы понять, как это работает, читайте о динамических компонентах в vue js.

Предупреждение: вам нужно сконфигурировать каждый отдельный элемент, связанный с данными, и он может быть подавляющим, но если у вас много таблицы данных, это может стоить того. не сдавайся :)

Заголовки могут быть сконфигурированы с использованием ловушек с заголовками. Прочитайте документацию для получения более подробной информации здесь. Найдите вкладку "Области" и посмотрите, что вы можете настроить.

И теперь для столбца, который вы должны настроить с помощью динамических компонентов. Тем не менее, верните компонент на основе типа столбца таблицы данных, скажем, если текст вернет <td>text</td> и так далее. Просто выложите для себя идею, и вам нужно настроить то, как вы хотите.

<v-data-table
  v-model="tableRowsSelected" 
  :items="tableItems"
  :headers="tableHeaders"
  :pagination.sync="tablePagination" 
  :rows-per-page-items="tablePaginationDropdown"
  item-key="name" 
  class="elevation-1"
> 
   <template v-if="tableHeaders" slot="headers" slot-scope="row">
    <tr>
      <th
        v-for="header in row.headers"
        :key="header.text"
        :class="['column sortable', tablePagination.descending ? 'desc' : 'asc', header.value === tablePagination.sortBy ? 'active' : '']"
        @click="changeSort(header.value)"
      >
        <v-icon small>arrow_upward</v-icon>
        {{ header.text }}
      </th>
    </tr>
  </template>
  <template template slot="items" slot-scope="row">
      <tr>
        <component v-for="header in Object.keys(row.item)" :key="header" :is="getComponentByColumnType(header, row.item)"></component>
      </tr>
  </template>

export default {
data () {
 return {
        tableItems: []
 }
 computed: {
  tableHeaders: function () { }
  tablePagination: functin() {}
  // and other properties here or you could simply configure them as part of 
  data.
  },
  method:{
    getComponentByColumnType(header, data) {
     // return the component per your column type here.
    }
  }
}

Ответ 3

Я не могу получить ваш вопрос, но я предполагаю, что вы хотите создать таблицу vuetify.

Ниже приведен шаблон:

 <template>
  <v-data-table
    :headers="headers"
    :items="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 {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' }
        ],
        items: [
          {
            value: false,
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            value: false,
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            value: false,
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            value: false,
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            value: false,
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            value: false,
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            value: false,
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            value: false,
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            value: false,
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            value: false,
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]
      }
    }
  }
</script>

Это копия вставки из vuetify docs

Теперь, если вы хотите использовать динамические заголовки, просто измените свойство заголовков.

Моя рекомендация состоит в том, чтобы использовать vuetify multiple select с вашей таблицей. Заполните множественный выбор столбцами таблицы и дайте пользователю выбрать или отменить выбор. Затем в таблице данных в заголовках: используйте свойство, которое соответствует множественному выбору

Например, если mutpiple select привязан к e6 (имя свойства), тогда таблица v-data будет выглядеть так:

  <v-data-table
    :headers="e6" /*this changed*/
    :items="items"
    hide-actions
    class="elevation-1"
  >

Ответ 4

Я знаю, что этот вопрос старый, но у меня возникла та же проблема, и я наткнулся на эту страницу. К счастью, я решил мою проблему, отредактировав код, указанный Бартом, для соответствия последнему синтаксису в Vue 2.

<v-data-table :headers="headers"
 :items="myDataObject"
 class="elevation-24">
    <template v-slot:body="props">
      <tr v-for="index in props.items">
        <td v-for="header in headers" class="text-left font-weight-black">
          {{ index[header.value]}}
        </td>
      </tr>
    </template>
</v-data-table>