我正在使用 API 給出的 json 物件創建一個表 API 資料如下所示：
const data = {
period1: [
{ uur: '1', klas: '4c, 4d', lokaal: '---', absent: 'Nele', tekst: 'les LO gaat door', vervanger: '---' },
{ uur: '1', klas: '2b', lokaal: 'D 3.01', absent: 'Jan', tekst: 'thuis na mail', vervanger: 'Robbe' }
],
period2: [
{ uur: '2', klas: '4c, 4d', lokaal: '---', absent: 'Nele', tekst: 'les LO gaat door', vervanger: '---' }
],
lunch: []
};
我的表格視圖有一堆<tbody>例如：
<template>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<TableRow /> <!-- row component -->
</tbody>
<tbody>
...
</table>
第一次迭代應該有一個額外<td>的給定句點（prop），并且<slot>應該在一個 html 元素中傳遞。例如，data.lunch需要
<img src="/assets/images/bread.svg">
我可以v-for用來創建其他表行，但我不知道第一個：
<TableRow v-for="item in witteLessen.period1" :key="item" :absent="item.absent" :classroom="item.lokaal" :grade="item.klas" :message="item.tekst" :substitute="item.vervanger" />
（我計劃item作為道具傳遞以使其更清潔，但我希望它首先起作用。
TableRow<template>看起來像這樣：
<template>
<tr>
<td :rowspan="rowspan" class="hourLabel" width="5%" v-if="hourLabel"><slot></slot></td>
<td width="20%">{{ absent }}</td>
<td width="7%">{{ grade }}</td>
<td width="20%">{{ substitute }}</td>
<td width="7%">{{ classroom }}</td>
<td>{{ message }}</td>
</tr>
</template>
我還寫了我試圖移植到 vue 的代碼，這可能有助于澄清：https ://codepen.io/maxtechnics/pen/eYymXOM
uj5u.com熱心網友回復：
您應該使用indexwith 回圈，然后有條件地使用index.
我為您制作了這個沙箱來嘗試這種方法： https ://codesandbox.io/s/objective-hertz-kswvyd?file=/src/components/Table.vue
編輯：從代碼盒中添加了最重要的位
桌子：
<template>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<TableRow
v-for="(item, index) of items.period1"
:key="index"
:absent="item.absent"
:classroom="item.lokaal"
:grade="item.klas"
:message="item.tekst"
:substitute="item.vervanger">
<td v-if="index === 0">HTML THAT YOU WANT GOES HERE</td>
</TableRow>
</tbody>
</table>
</template>
表行
<template>
<tr>
<slot></slot>
<td width="20%">{{ absent }}</td>
<td width="7%">{{ grade }}</td>
<td width="20%">{{ substitute }}</td>
<td width="7%">{{ classroom }}</td>
<td>{{ message }}</td>
</tr>
</template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/444700.html
標籤：Vue.js