如何向引导Vue表添加自定义页脚

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

我现在得到的只是一个反映页眉的页脚。

这是在引导Vue自定义头文档之后编写的，但在细节上非常粗略，没有提供如何添加真正自定义信息的真实信息。我只想我的模板显示在页脚。

编辑：好吧，我确实弄明白了以下几点。还是不是我想要的。

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

所以使用这个模板：

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

它将用我键入的文本替换“名称”列页脚中的“名称”文本<代码>不呈现“名称”

我必须为我想要不同的每个插槽重复这个模板。在我的例子中，我有6列，所以我必须在第一个说总计和最后一个用货币符号显示总数之间有5个空白模板。

我可能需要做的只是输入一个




Answer 1

b表的v型提供了当前显示项目的数组。

您可以使用此数据以及范围限定的页脚槽来生成所显示行的总和。

只需创建几个计算道具，迭代由v-Model提供的值，以生成所需的总和。

<template>
  <b-table :items="items" :fields="fields" v-model="visibleRows" foot-clone>
    <template slot="FOOT_a" slot-scope="scope">
      {{ aTotal }}
    </template>
    <template slot="FOOT_b" slot-scope="scope">
      {{ bTotal }}
    </template>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { a: 1, b: 2 },
        { a: 3, b: 4 },
        { a: 1.5, b: 3 }
      ],
      fields: ['a', 'b'],
      // b-table will populate this array with the visible rows in the table
      visibleRows: []
    }
  },
  computed: {
    aTotal() {
      return this.visibleRows.reduce((accum, item) => { return accum + item.a }, 0.0)
    },
    bTotal() {
      return this.visibleRows.reduce((accum, item) => { return accum + item.b }, 0.0)
    }
  }
}
</script>