如何在Bootstrap-Vue Table组件中实现双页脚？

嘿，我来帮你搞定Bootstrap-Vue表格的双页脚需求！其实官方文档里虽然没直接写双页脚的实现，但利用b-table的插槽特性，我们可以轻松实现两种简洁的方案，完全不需要在表格外加额外div。

方案一：保留foot-clone的同时添加额外页脚行 #

如果你想保留表头克隆的页脚行（就是foot-clone带来的那一行），同时在它下面再加一行自定义内容，可以用foot.append插槽——这个插槽专门用来在克隆页脚的后面追加内容：

<b-table striped hover 
         :items="items" 
         :fields="visibleFields" 
         :sort-compare="sortCompare" 
         :sort-by.sync="sortBy" 
         foot-clone 
         selectable 
         select-mode="single" 
         @row-selected="onRowSelected" 
         :tbody-tr-class="rowClass" >
  <!-- 原有的列级页脚内容 -->
  <template v-slot:foot(serving)="data">
    <span>Total:</span>
  </template>
  <!-- 新增的第二页脚行 -->
  <template v-slot:foot.append>
    <tr>
      <!-- 用colspan跨所有列，根据你的实际列数调整数值 -->
      <td :colspan="visibleFields.length" class="text-right font-weight-bold">
        Grand Total: {{ calculateGrandTotal() }}
      </td>
    </tr>
  </template>
</b-table>

方案二：完全自定义双页脚行 #

如果你不需要克隆表头的页脚，想完全控制两页脚行的内容，直接用foot插槽（不带列名的那个），在里面写两个<tr>标签就行：

<b-table striped hover 
         :items="items" 
         :fields="visibleFields" 
         :sort-compare="sortCompare" 
         :sort-by.sync="sortBy" 
         selectable 
         select-mode="single" 
         @row-selected="onRowSelected" 
         :tbody-tr-class="rowClass" >
  <!-- 自定义整个页脚区域，包含两行 -->
  <template v-slot:foot>
    <!-- 第一页脚行：对应各列的统计内容 -->
    <tr>
      <td></td>
      <td></td>
      <td><span>Total per serving:</span></td>
      <!-- 其他列根据需要填充内容 -->
    </tr>
    <!-- 第二页脚行：全局统计或说明 -->
    <tr>
      <td colspan="visibleFields.length" class="text-center text-muted">
        * 数据基于标准份规格计算
      </td>
    </tr>
  </template>
</b-table>

这两种方案都是在表格的<tfoot>内部添加内容，完全符合语义化规范，比表格外的div更简洁，也完美适配Bootstrap-Vue的表格组件逻辑。

内容的提问来源于stack exchange，提问作者Louis Charles