Vue - Bootstrap Добавить специальную строку в таблицу

Question

Можно ли добавить специальную строку, как горизонтальное разбиение, в компоненте b-таблицы?

Может ли позиция специальной строки основываться на номере строки? Как всегда между строкой 2 и 3.

Пример:

+----------------------------------------------------------------------+
|              |                |                   |                  |
|              |                |                   |                  |
|              |                |                   |                  |
+----------------------------------------------------------------------+
|              |                |                   |                  |
|              |                |                   |                  |
|              |                |                   |                  |
+----------------------------------------------------------------------+
|                     Some special text here                           |
|                   Split the table into two parts                     |
+----------------------------------------------------------------------+
|              |                |                   |                  |
|              |                |                   |                  |
|              |                |                   |                  |
+----------------------------------------------------------------------+
|              |                |                   |                  |
|              |                |                   |                  |
|              |                |                   |                  |
+----------------------------------------------------------------------+
|              |                |                   |                  |
|              |                |                   |                  |
+----------------------------------------------------------------------+

Answer 1

Этого можно добиться с помощью атрибута colspan

Добавьте идентификатор к своим данным:

rows: [
      { id: 1, name: 'Bill', handle: 'bill' },
      { id: 2, name: 'Bob', handle: 'bob', special: 2 },
    ]

Затем добавьте v-if к элементам <tr> в вашем шаблоне:

<template v-for="row in rows">
      <tr v-if="!row.special">
        <td>{{ row.name }}</td>
        <td>{{ row.handle }}</td>
      </tr>
      <tr v-else>
        <td :colspan="row.special">
            {{ row.name}}
        </td>
      </tr>
</template>

пример: https://codepen.io/ellisdod/pen/jObVJxN