Question

美好的一天，

在尝试学习VueJS时，我想制作一个通用的Vuetify Data Table，它可以接收具有n属性的对象数组，其中n是未知的。

我发现的有关使用这些表的每个示例和文章都将对象属性硬编码到它们的headers和items插槽中，如下所示：

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

如果我有1个或2个数据集，那可以。但是，如果我想将100个不同的数据集之一加载到数据表中怎么办？我真的需要100个带有硬编码值的“ foo-table”组件吗？

如何处理模板插值，使我可以重用单个数据表组件，该组件可以处理以下数据：

items: [{ name: 'foo', age: 100, occupation: 'retired' }, ...]

和

items: [{ seq: '1234', data: 'XYZ', flag: 'N', operator: 'someone',  }, ...]

根据v-for（其中<tr>）的规定，正确地<td>按项目headers每个item[n][header[i].value]和每个项目参数<template slot='items' slot-scope='props'> <tr v-for='(item, i_index) in items' :key='i_index'> <td v-for='(header, h_index) in headers' :key='h_index'> {{ items[i_index][header.value] }} </td> </tr> </template> items slot？ >

我到目前为止所做的。

我为此花费了很多时间，而我想到的最好的方法如下：

<tr v-for ...>

但是它不起作用，因为它会产生items.length-倍的行，因为我认为def GetNewColumn(row): if row['Tevent_id'] == row['event_id']: val = 'Match' elif ...... else: return val df['Status'] = df.apply(GetNewColumn, axis=1)已经在其中隐式地进行了v-for，从而使我的>>> for i in []: ... print(i) ... else: ... print('here') ... here变得多余。

有人对我如何完成通用数据表有更好的主意吗？

Answer 1

我认为item插槽已经在内部隐式执行v-for 它。

是正确的，并且每一行只有一个循环：

<template slot="items" slot-scope="props">
  <td v-for="header in headers">{{ props.item[header.value] }}</td>
</template>

在vuetify网站上查看这款改编的笔。 https://codepen.io/anon/pen/daQbrE?&editable=true&editors=101

VueJS / Vuetify-是否可以动态加载数据表而无需对列进行硬编码？

1 个答案: