Vue.js vue boostrap表组件上的双页脚

我想为引导vue表实现一个双页脚

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

    <!-- Footers total nutritional values -->
    <template v-slot:foot(serving)="data">
        <span>Total:</span>
    </template>
</b-table>

该表如下所示：

引导vue仅在创建页脚时提供以下功能：

<!-- Footers total nutritional values -->
<template v-slot:foot(serving)="data">
    <span>Total:</span>
</template>

问题是我不知道如何用这个添加第二个页脚。另一种方法是在表格下方添加一个div，显示我想要的内容，但我认为有一种更干净的方法可以做到这一点。

您可以使用自定义脚槽。此插槽将直接渲染到表的tfoot中，因此您可以自由控制如何使用tr和td构造脚

新Vue{ el:“应用程序”， 资料{ 返回{ 字段：[ //需要自定义格式的列 {键：'name'，标签：'Full name'}， {键：'age'，标签：'age'}， {键：'sex'，标签：'sex'} ], 项目：[ {姓名：{第一个：'约翰'，最后一个：'多伊'}，性别：'男性'，年龄：42}， {姓名：{第一个：'简'，最后一个：'多伊'}，性别：'女'，年龄：36}， {姓名：{第一个：'鲁宾'，最后一个：'金凯德'}，性别：'男性'，年龄：73}， {姓名：{第一个：'雪莉'，最后一个：'鹧鸪'}，性别：'女性'，年龄：62} ] } } } {{data.value.first}{{data.value.last}} {{field.label} 这是我的第二个页脚