问如何向Bootstrap-Vue表添加自定义页脚
EN

Stack Overflow用户

提问于 2019-03-27 15:30:36

回答 1查看 6K关注 0票数 1

我有一个表，其中包含我想要添加脚注的数据，以便在每一行中添加和显示一个整数值的合计。

我已经尝试了以下代码。

我有如下表格：

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

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

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

我可能需要做的就是放入一个模仿我想要的页脚的<div/>，然后把它放到表格的底部。

bootstrap-vue

vue.js

DNS解析特惠

DNS解析提供智能解析、流量调度、安全防护等服务

回答 1

Stack Overflow用户

发布于 2019-07-09 07:30:13

b-table的v-model提供了当前显示项的数组。

您可以将此数据与scoped footer slots一起使用来生成所显示行的总和。

只需创建几个计算属性，这些属性迭代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>