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

Posted 2023-02-22

【中文标题】如何将自定义页脚添加到 Bootstrap-Vue 表

【英文标题】：How to add a Custom Footer to a Bootstrap-Vue table

【发布时间】：2019-08-18 05:48:03

【问题描述】：

我有一个表格，其中包含我想要添加页脚的数据，以便在每行中相加并显示一个 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/> 并将其对接到表格的底部。

【问题讨论】：

我最终只创建了一个<div></div>，其中包含我在表格下需要的信息，以确保表格和此 div 之间没有填充。当引导程序删除页眉和页脚时，这也允许元素对较小的屏幕尺寸做出反应，将一行中的所有列堆叠在一起，并为每个列数据点添加标题标签。因此，一行以列视图结束，其中每一行都是“Column1Label: Col1Data”。然后我的页脚<div> 保持我想要的格式，我仍然在底部。

【参考方案1】：

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>