Question

我有一个表，其中要添加页脚以添加数据并在每行中显示int值的总计。

我尝试了以下代码。

我的表格如下：

<b-table
  id="myTable"
  hover
  striped
  :items="myItems"
  :fields="myFields"
  show-empty
  empty-text:"No items to display"
  :foot-clone="true"
>
  <template slot="FOOT_row" slot-scope="data">
    <td>TOTAL<td>
    <td/><td/>
    <td><CurrencyFormatingComponent :Currency="data.Currency" :amount="this.CustomTotalFromData" class="pull-right"/></td>
  </template>
</b-table>

我的Vue数据

  myItems:[
    { Col1: "stuff", Col2: "otherStuff", Col3: "moreStuff", Col4: 12},
    { Col1: "stuffer", Col2: "otherStuffer", Col3: "moreStuffer", Col4: 10}
  ],
  myFields:[ 'Name', 'NickName', 'FavoriteMovie', 'netWorth' ]

我现在得到的只是一个与页眉相对应的页脚。

这是继Bootstrap-Vue自定义标头文档之后的内容，但是在细节上非常轻率，并且没有提供有关如何添加真正的自定义信息的真实信息。我只希望模板显示在页脚中。

编辑：好的，所以我确定了以下内容。仍然不是我想要的。

我意识到Bootstrap-Vue的这种设置方式是克隆标题，然后替换每一列中的数据。

因此使用此模板：

  <template slot="FOOT_Name" >
    Don't render "Name".
  </template>

它将用我键入的文本替换“名称”列的页脚中的“名称”文本； Don't render"Name".

我必须为我想要的每个插槽重复此模板。在我的情况下，我有6列，因此我必须在第一个说Total和最后一个之间用5个空白模板才能以货币符号显示该总数。

我可能需要做的只是放在一个<div/>中，它模仿我想要的页脚并将其对接到表的底部。

Answer 1

v-model的{{1}}提供了一系列当前显示的项目。

您可以使用此数据以及scoped footer slots来生成显示行的总和。

只需创建一些经过计算的道具即可对b-table提供的值进行迭代以生成所需的总和。

如何将自定义页脚添加到Bootstrap-Vue表

1 个答案: