当需要实现一个表格组件,需要接收不确定表头数据、不确定行列的多种情况一一对应的数据时,可以这样嵌套
<table>
<tr>
<th v-for="title in productQuote.header" :key="title.id">{title}}</th>
</tr>
<tr v-for="data in productQuote.data" :key="data.id">
<td v-for="(li,i) in data" :key="i">{{data[i]}}</td>
</tr>
</table>
嵌套的v-for不需要更改,就可以实现 对象×数组 四种情况的表格数据渲染:
- 对象内的对象
- 对象内的数组
- 数组内的数组
- 数组内的对象