vue-boostrap 表组件上的双页脚

Question

我想为 bootstrap-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>

该表如下所示：

Bootstrap vue文档仅提供此内容来创建页脚：

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

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

Answer 1

您可以使用custom-foot插槽。此插槽将直接渲染到tfoot桌子的 ，因此您可以自由控制以任意方式使用tr和构建脚部td

new Vue({
  el: '#app',
  data() {
      return {
        fields: [
          // A column that needs custom formatting
          { key: 'name', label: 'Full Name' },
          { key: 'age', label: 'Age' },
          { key: 'sex', label: 'Sex' }
        ],
        items: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ]
      }
    }
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table :fields="fields" :items="items">
    <template v-slot:cell(name)="data">
      {{ data.value.first }} {{ data.value.last }}
    </template>
    
    <template v-slot:custom-foot>
      <!-- You can customize this however you want, this is just as an example -->
      <tr>
        <th v-for="field in fields" :key="field.key">
          {{ field.label }}
        </th>
      </tr>
      <tr>
        <td class="bg-dark text-white" :colspan="fields.length">
          This is my second footer
        </td>
      </tr>
    </template>
  </b-table>
</div>