在bootstrap-vue的b表中添加第二个标题行

我有一个表头看起来像这样：

我正在尝试在bootstrap-vue中重新创建此表。原始HTML看起来像这样（简化）：

<table>
  <thead>
    <tr>
      <th></th>
      <th colspan="4">Group 1</th>
      <th colspan="4">Group 2</th>
      <!--etc-->
    </tr> 
    <tr>
      <th>Field</th>
      <th>Median</th>
      <!-- etc -->
    </tr>
  </thead>
  <tbody><!-- actual data --></tbody>
</table>

核心的b表代码将轻松/自动创建第二行。我试图弄清楚如何在其中塞住第一行。作为一个小贴士，我需要能够控制两个组名的内容（即，如果它们在某个地方更改了控件，则“组1”将变为“组Foo”）。

我为任何需要起点来解决这个问题的人做了一个游乐场：https : //codesandbox.io/s/p56y3y2lnx那里的目标是以编程方式添加第一行，该行包括group1name和跨越表格的宽度在一个colspan中。