Vuejs2 将第二个标题行添加到引导vue'；s b表

我有一个如下所示的表格标题：

我正在尝试在bootstrap vue中重新创建此表。原始HTML如下所示（简化）：

第一组
第2组
领域
中值的

核心b表代码将轻松/自动创建第二行。我正在想办法堵住第一排。作为一个小玩家，我需要能够控制两个组名的内容（即，如果他们在某个地方更改了一个控件，“组1”变成“组Foo”）

---

我为任何需要一个起点来帮助解决这一问题的人打造了一个游乐场：其中的目标是通过编程方式添加第一行，其中包括

group1name

，并在一个colspan中跨越表格的宽度。

我无法找到一种干净的方法来实现我想要的结果，所以我最终得到了一些更骇人的东西

在

b-table

上，您可以添加

input

事件，因此我这样做是为了知道表何时完成加载

HTML:

然后在我的方法中：

tableLoaded() {
    if (!this.$refs.table) {
        return;
    }

    var headers = this.$refs.table.$el.querySelectorAll('thead tr');
    if (headers.length > 1) {
        return;//nothing to do, header row already created
    }

    var topHeader = document.createElement('tr');
    topHeader.innerHTML =
        '<th></th>'+
        '<th colspan="3">Group 1</th>'+
        '<th colspan="4">Group 2</th>'+
        '<th colspan="4"></th>';
    headers[0].parentNode.insertBefore(topHeader, headers[0]);
}

tableLoaded（）{
如果（！此.$refs.表）{
回来
}
var headers=this.$refs.table.$el.queryselectoral（'thead tr'）；
如果（headers.length>1）{
return；//无需执行任何操作，已创建标题行
}
var topHeader=document.createElement（'tr'）；
topHeader.innerHTML=
''+
“第一组”+
“第2组”+
'';
headers[0].parentNode.insertBefore（topHeader，headers[0]）；
}

---

我很乐意接受一个更干净的解决方案。

我无法找到一个干净的方法来实现我想要的结果，所以我最终得到了一个更粗糙的解决方案

在

b-table

上，您可以添加

input

事件，因此我这样做是为了知道表何时完成加载

HTML:

然后在我的方法中：

tableLoaded() {
    if (!this.$refs.table) {
        return;
    }

    var headers = this.$refs.table.$el.querySelectorAll('thead tr');
    if (headers.length > 1) {
        return;//nothing to do, header row already created
    }

    var topHeader = document.createElement('tr');
    topHeader.innerHTML =
        '<th></th>'+
        '<th colspan="3">Group 1</th>'+
        '<th colspan="4">Group 2</th>'+
        '<th colspan="4"></th>';
    headers[0].parentNode.insertBefore(topHeader, headers[0]);
}

tableLoaded（）{
如果（！此.$refs.表）{
回来
}
var headers=this.$refs.table.$el.queryselectoral（'thead tr'）；
如果（headers.length>1）{
return；//无需执行任何操作，已创建标题行
}
var topHeader=document.createElement（'tr'）；
topHeader.innerHTML=
''+
“第一组”+
“第2组”+
'';
headers[0].parentNode.insertBefore（topHeader，headers[0]）；
}

---

我很乐意接受更干净的解决方案。

从v2.0.0-rc.14版（发布于2019-03-08）开始，您现在可以使用插槽

和顶部

在标题上方添加额外的行

例如，您可以将以下代码放在

b-table

标记中：

  <template slot="thead-top" slot-scope="data">
    <tr>
      <th></th>
      <th colspan="3">Group 1</th>
      <th colspan="4">Group 2</th>
      <th colspan="4"></th>
    </tr>
  </template>

第一组
第2组

---

这里是对新功能的参考：

从v2.0.0-rc.14版（发布于2019-03-08）开始，您现在可以使用插槽

和顶部

在标题上方添加额外的行

例如，您可以将以下代码放在

b-table

标记中：

  <template slot="thead-top" slot-scope="data">
    <tr>
      <th></th>
      <th colspan="3">Group 1</th>
      <th colspan="4">Group 2</th>
      <th colspan="4"></th>
    </tr>
  </template>

第一组
第2组

---

这里是对新功能的引用：

我的一个想法是在b表上使用一个事件（

@input

）来注入额外的行。。。但它几乎与Vue的所有功能背道而驰：）uses可能是一个选项，就像我的想法一样，就是在b表上使用事件（

@input

）来注入额外的行。。。但是它几乎是反对Vue的一切：）使用可能是一种选择，像这样谢谢John，我想我实际上还不能更新到那个版本。。。但展望未来，你的解决方案肯定是正确的@赖莉：谢谢你添加了这个功能！我现在已经用过好几次了。谢谢约翰，我想我实际上已经用过了，但是还不能更新到那个版本。。。但展望未来，你的解决方案肯定是正确的@赖莉：谢谢你添加了这个功能！我现在已经用过好几次了。