<template>
<v-data-table
:headers="headers"
:items="records"
:items-per-page="5"
show-select
loading
item-key="id"
class="elevation-1"
>
<template v-slot:top>
<div>
<table-tabs></table-tabs>
<v-text-field
append-icon="mdi-close"
class="mx-4"
flat
hide-details
label="Search"
prepend-inner-icon="mdi-magnify"
solo-inverted
></v-text-field>
</div>
</template>
<template v-slot:item.id="{ item }">
<product-instance-cell v-bind:item="item" :data="item"></product-instance-cell>
</template>
<template v-slot:item.boxCode="{ item }">
<serial-cell v-bind:boxCode="item.boxCode" :serial="item.boxCode"></serial-cell>
</template>
<template v-if="hasField('manager')" v-slot:item.manager="{ item }">
<user-cell v-bind:user="item.manager" :user="item.manager"></user-cell>
</template>
<template v-slot:item.customer="{ item }">
<customer-cell v-bind:customer="item.customer" :customer="item.customer"></customer-cell>
</template>
<template v-slot:item.updatedAt="{ item }">
<date-cell v-bind:updatedAt="item.updatedAt" :date="item.updatedAt"></date-cell>
</template>
</v-data-table>
как показано ниже, я должен передать имя поля и компонент ячейки enet непосредственно под шаблоном, чтобы нарисовать пользовательскую ячейку для указанных c модели и поля.
<template v-slot:item.id="{ item }">
<product-instance-cell v-bind:item="item" :data="item"></product-instance-cell>
</template>
, но на чем я настаиваю do - динамическая загрузка ячеек, потому что в моей таблице нет определенной модели использования c. таблица может нарисовать 5 различных типов моделей Array<T>
, и у меня есть что-то под названием table spec
, которое содержит всю информацию, необходимую для рисования таблицы. например, имена ячеек заголовка, логики сортировки, максимальное количество строк, имена компонентов ячеек по модели <-> имя поля и т. д. c ..
Было легко иметь дело с заголовком таблицы данных, который не требует другого шаблона , а также работает полный код шаблона выше. но только для одной модели. Я хотел бы создать супер динамическую c таблицу с данными c. как этого добиться?
не определено c решение для этого случая, но приветствуются другие философские подходы vue.