Блог

Главная - Вопросы по программированию - Как добавить пользовательский нижний колонтитул в таблицу Bootstrap-Vue

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

#vue.js #bootstrap-vue

#vue.js #bootstrap-vue

Вопрос:

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

Это заменит текст «Name» в нижнем колонтитуле для столбца «Name» текстом, который я ввел; Don't render"Name".

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

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

Комментарии:

1. В итоге я просто создал <div></div> , который содержал необходимую мне информацию под таблицей, гарантируя отсутствие отступов между таблицей и этим div. Это также позволило элементу реагировать на меньшие размеры экрана, когда bootstrap удаляет верхний и нижний колонтитулы, укладывает все столбцы подряд друг на друга с добавленной меткой заголовка к каждой точке данных столбца. Таким образом, строка заканчивается в виде столбца, где каждая строка является » Column1Label : Col1Data «. Тогда мой нижний колонтитул <div> сохраняет желаемый формат, и я все еще внизу.

Ответ №1:

v-model Of 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>