Vue-vuetify数据表动态单元格加载

Question

<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>

像下面一样，我必须直接在模板下传递字段的名称和单元格组件，以绘制特定模型的自定义单元格&领域

<template v-slot:item.id="{ item }">
<product-instance-cell v-bind:item="item" :data="item"></product-instance-cell>
</template>

但我坚持要做的是动态加载单元格，因为我的表没有特定的使用模型。该表可以绘制5种不同类型的模型CCD_ 1，并且我有一种称为CCD_。例如。标题单元格名称、排序逻辑、最大行数、单元格组件名称(按型号(<->字段名称等。

处理数据表头很容易，不需要其他模板，而且上面的完整模板代码也能工作。但仅针对一个模型。我想用规范数据创建超级动态表。如何做到这一点？

这不是具体的解决方案，但其他vue的哲学方法是受欢迎的。

Answer 1

我今天处理了一个类似的问题，制作了一个非常动态的表，它为每个模型呈现不同的内容，但它有一些列，也就是v-slot:item.<name>。

我有一个常见的headers-json对象，它具有表应该为每个模型呈现的所有属性，它看起来像这样：

"headers": [
{ "text" : "Data / Hora" ,       "value" : "date" ,             "filterable" : true ,   "sortable" : true ,     "type" : "text-date" , "align" : "left" , "format" : "AAAA-MM-DD HH:MM" },
{ "text" : "Tipus pujada" ,      "value" : "upload_type" ,      "filterable" : true ,   "sortable" : false ,    "type" : "text"      , "align" : "center"    },
{ "text" : "Elements" ,          "value" : "elements" ,         "filterable" : true ,   "sortable" : false ,    "type" : "text"  },
{ "text" : "Rebut i validat" ,   "value" : "status" ,           "filterable" : true ,   "sortable" : false ,    "type" : "chip" ,   "style": [ { "color" : "red", "value" : "ERROR" } , { "color" : "green" , "value" : "OK" } ] },
{ "text" : "Log" ,               "value" : "log" ,              "filterable" : false ,  "sortable" : false ,    "type" : "icon" ,   "icon": "mdi-magnify" , "event" : "click" , "action" : "openDialog" },
{ "text" : "Fitxer pujat" ,      "value" : "uploaded_file" ,    "filterable" : false ,  "sortable" : false ,    "type" : "icon" ,   "icon": "mdi-file" , "event" : "click" , "action" : "downloadJSONFileFromJSONData", "url" : "xxxxxxxx", "filename" : "AAAA-MM-DD-filename.json" }
]

因此，我可以将所有具有相同标头类型的列(如icon或text、chip(呈现为相同的列。

为了解决这个问题，我使用了计算属性，可以根据其类型过滤头槽：

computed: {
computedHeaders: function () {
//Filters the headers of type Icon
return this.headers.filter(header => header.type==='icon');
}
}

这样我就可以呈现所有有共同点但命名不同的插槽：

<template v-for="(head,i) in computedHeaders" v-slot:[`item.${head.value}`]="{ item }">
<v-icon
:key="i"
v-text="head.icon"
>
</v-icon>
</template>