在bootstrap-vue的b表中添加第二个标题行 [英] Adding a second header row to bootstrap-vue's b-table

问题描述

我有一个像这样的表头:

I have a table header that looks like this:

我正在尝试在bootstrap-vue中重新创建此表.原始HTML看起来像这样(简化):

I'm trying to recreate this table in bootstrap-vue. The raw HTML looks like this (simplified):

<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").

The core b-table code will create the 2nd row easily/automatically. I'm trying to figure out how to jam the 1st row in there. As a little kicker, I need to be able to control the contents of the two group names (i.e. if they change a control somewhere, "Group 1" becomes "Group Foo").

我为需要起点帮助解决此问题的任何人提供了一个游乐场: https://codesandbox. io/s/p56y3y2lnx 此处的目标是以编程方式添加第一行，该行包括group1name并将表的宽度跨过一个colspan.

I made a playground for anyone that needs a starting point for helping figure this out: https://codesandbox.io/s/p56y3y2lnx The goal in there would be to programmically add a 1st row that includes the group1name and spans the width of the table in one colspan.

推荐答案

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

As of version v2.0.0-rc.14 (released 2019-03-08) you can now add additional rows above the header using the slot thead-top.

以您的示例为例，您需要将以下代码放在b-table标记内:

For your example, you would place the following code inside of the b-table tag:

  <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>

这里是对新功能的引用:

Here's a reference to the new feature: https://bootstrap-vue.js.org/docs/components/table/#adding-additional-rows-to-the-header

这篇关于在bootstrap-vue的b表中添加第二个标题行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！