向 bootstrap-vue 的 b-table 添加第二个 header 行

Question

我有一个 table header 看起来像这样：

我正在尝试在 bootstrap-vue 中重新创建这个 table。原始 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-table 代码将创建第二行 easily/automatically。我在想办法把第一排塞进去。作为一个小问题，我需要能够控制两个组名的内容（即，如果他们在某处更改控件，"Group 1" 变为 "Group Foo"）。

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

Answer 1

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

在 b-table 上你可以添加一个 input 事件，所以我这样做是为了知道 table 何时完成加载。

HTML:

<b-table @input="tableLoaded" ref="table"></b-table>

然后在我的方法中：

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]);
}

我很乐意接受更简洁的解决方案。

Answer 2

从版本 v2.0.0-rc.14（2019-03-08 发布）开始，您现在可以使用插槽 thead-top 在 header 上方添加额外的行。

对于您的示例，您可以将以下代码放在 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>

这是对新功能的引用：https://bootstrap-vue.js.org/docs/components/table/#adding-additional-rows-to-the-header

向 bootstrap-vue 的 b-table 添加第二个 header 行

Adding a second header row to bootstrap-vue's b-table

vuejs2

bootstrap-vue