代码之家 › 专栏 › 技术社区 › Ryley

在引导vue的b表中添加第二个标题行

bootstrap-vue vuejs2

1

Ryley · 技术社区 · 6 年前

我有一个这样的表标题:

我正试图在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中跨越表的宽度。

2 回复 | 直到 6 年前

1

John Shipp 5 年前

从版本v2.0.0-rc.14(发布于2019-03-08)开始,您现在可以使用插槽在标题上方添加其他行 thead-top .

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

2

Ryley 6 年前

我找不到一个干净的方法来达到我想要的结果,所以我最终得到了一个更粗糙的结果。

打开(放) b-table 您可以添加 input 事件,所以我这样做是为了知道表何时完成加载。

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

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