Vue-Bootstrap 在表格中添加特殊行答案

【问题标题】：Vue-Bootstrap Add special row in tableVue-Bootstrap 在表格中添加特殊行
【发布时间】：2020-08-04 13:52:02
【问题描述】：

是否可以在 b-table 组件中添加特殊行，例如水平拆分？

特殊行的位置可以根据行号吗？像往常一样在第 2 行和第 3 行之间。

例子：

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

【问题讨论】：

标签： css twitter-bootstrap vue.js

【解决方案1】：

您可以使用 colspan 属性实现此目的

为您的数据添加标识符：

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

然后在模板中的 <tr> 元素上添加 v-if：

<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

【讨论】：