Двойной нижний колонтитул на компоненте таблицы vue -Boostrap - PullRequest
Новая
       41

Двойной нижний колонтитул на компоненте таблицы vue -Boostrap

0 голосов
/ 30 января 2020

Я хотел бы реализовать двойной нижний колонтитул для таблицы 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 чуть ниже таблицы и отобразить то, что я хочу, но я думаю, что есть более чистый способ сделать это.

1 Ответ

4 голосов
/ 30 января 2020

Вы можете использовать слот 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>
...