Как добавить пользовательский нижний колонтитул в таблицу Bootstrap-Vue - PullRequest
Новая
       18

Как добавить пользовательский нижний колонтитул в таблицу Bootstrap-Vue

0 голосов
/ 27 марта 2019

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

Что мне, возможно, нужно сделать, это просто вставить <div/>, который имитирует нужный мне нижний колонтитул, и поднять его до нижней части таблицы.

1 Ответ

0 голосов
/ 09 июля 2019

v-model из b-table предоставляет массив отображаемых в данный момент элементов.

Вы можете использовать эти данные вместе с слотами нижнего колонтитула с областью действия для генерации суммы вашихотображаемые строки.

Просто создайте несколько вычисленных реквизитов, которые перебирают значение, предоставленное 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>
...