Нужно сделать два цикла - по элементам массива с данными, и по элементам вложенных массивов.
Вариант раз: внешний
v-for вешаем на
template, внутренний на
tr, ячейки с rowspan'ами выводятся только на нулевой итерации внутреннего цикла:
<template v-for="row in rows">
<tr v-for="(n, i) in row.links">
<td v-if="!i" :rowspan="row.links.length">{{ row.name }}</td>
<td v-if="!i" :rowspan="row.links.length">{{ row.age }}</td>
<td>{{ n }}</td>
</tr>
</template>
Если ячейки с rowspan'ами прописывать вручную не хочется, то добавляем ещё по одному
template и
v-for:
<template v-if="!i">
<td v-for="k in [ 'name', 'age' ]" :rowspan="row.links.length">{{ row[k] }}</td>
</template>
Вариант два - отказаться от использования rowspan, выводить все элементы вложенных массивов в одну ячейку, стилизованную под несколько:
<tr v-for="row in rows">
<td v-for="item in row">
<template v-if="item instanceof Array">
<div v-for="n in item">{{ n }}</div>
</template>
<template v-else>{{ item }}</template>
</td>
</tr>
Вариант три (демо не будет, лень делать) - строка с rowspan'ами рендерится отдельно, затем цикл по вложенному массиву без нулевого элемента:
<template v-for="row in rows">
<tr>
<td :rowspan="row.links.length">{{ row.name }}</td>
<td :rowspan="row.links.length">{{ row.age }}</td>
<td>{{ row.links[0] }}</td>
</tr>
<tr v-for="n in row.links.slice(1)">
<td>{{ n }}</td>
</tr>
</template>
Средний
