Как быть с массивом в одной ячейке таблицы? Как сделать rowspan во Vue темплейте?

Question

[jeruthadam]

Есть данные:

tempData: [
        {
          name: 'Vasya',
          age: 22,
          links: ['http://facebook.com', 'http://google.com', 'http://vk.com'],
        },
        {
          name: 'Petya',
          age: 43,
          links: ['http://facebook.com', 'http://google.com', 'http://vk.com'],
        },
        {
          name: 'Stapan',
          age: 52,
          links: ['http://facebook.com', 'http://google.com', 'http://vk.com'],
        },
      ],

Непонятно как быть с последним значением links
Не нашел ниодного примера как динамически переопределять rowspan во Вью шаблоне при рендеринге цикла.
Наверное можно и без него обойтись, но все равно не понятно как вывести в последней ячейке не голым текстом массив, а именно пройтись по нему циклом.

Сделал пример - https://codepen.io/anon/pen/rEZeZM
Посмотрел существующие решения во всяких Вьютифаях - ни у кого нету rowspan. Как так? Это что невыполнимая задача?))

Answer 1

[0xD34F]

Нужно сделать два цикла - по элементам массива с данными, и по элементам вложенных массивов.

Вариант раз: внешний 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>

Comments

[jeruthadam]

Ничесе. Пошел изучать как вы это сотворили. Благодарность огромная!