Можно ли составить составную b-таблицу с несколькими элементами с bootstrap - vue? - PullRequest
Новая
       104

Можно ли составить составную b-таблицу с несколькими элементами с bootstrap - vue?

0 голосов
/ 05 августа 2020

Я хотел бы отобразить несколько элементов в bootstrap - vue b-таблице. Можно ли сделать это со штабелированным столом? В документации показаны только примеры составных таблиц с одним элементом.

Как мне указать поля или элементы? Это не работает. Этот код создает составную таблицу с двумя столбцами (заголовки столбцов слева и значения справа). Вместо того, чтобы отображать два элемента рядом в левой половине таблицы, заголовки столбцов повторяются, и все организовано в одних и тех же двух вертикальных столбцах. 

<template>
    ...
    <b-table
      small
      stacked
      :fields="fooParameters"
      :items="foos"
      :busy="true"
      show-empty
      empty-text="No duplicates"
    >
    </b-table>
   ...
</template>

<script>
  ...
  duplicates: [{fooName: "Alice", fooAge: "25"}, {fooName: "Bob": fooAge: "24"}]
  ...
</script>

1 Ответ

0 голосов
/ 06 августа 2020

Опора stacked будет генерировать строку для каждого элемента, но, поскольку это не то, что вы ищете, вам нужно будет создать функциональность, чтобы элементы располагались горизонтально, каждый из которых имел собственный столбец.

Я считаю, что приведенный ниже фрагмент - это то, что вы ищете, и если нет, вы можете использовать его в качестве начальной ссылки. 

new Vue({
  el: "#app",
  computed: {
    fields() {
      //'isRowHeader: true' to render it as a TH instead of TD
      // Formatter to capitalize the first letter, can be removed
      let fields = [{
        key: "type",
        stickyColumn: true,
        isRowHeader: true,
        formatter: this.ucFirstLetter
      }];

      Object.keys(this.results).forEach((key) => {
        // Since the key is just an index, we hide it by setting label to an empty string.
        fields.push({
          key: key,
          label: ""
        });
      });

      return fields;
    },
    items() {
      const items = [];

      /* map our columuns */
      const cols = Object.keys(this.results);

      /* 
        map our types based on the first element 
        requires all the elements to contain the same properties,
        or at least have the first one contain all of them
      */
      const types = Object.keys(this.results[cols[0]]);

      /* create an item for each type */
      types.forEach((type) => {
        const item = {
          type: type
        };

        /* fill up item based on our columns */
        cols.forEach((col) => {
          item[col] = this.results[col][type];
        });

        items.push(item);
      });

      return items;
    }
  },
  data() {
    return {
      results: [{
          correct: 0.007,
          errors: 0.081,
          missing: 0.912
        },
        {
          correct: 0.008,
          errors: 0.098,
          missing: 0.894
        },
        {
          correct: 0.004,
          errors: 0.089,
          missing: 0.91
        },
        {
          correct: 0.074,
          errors: 0.07,
          missing: 0.911
        }
      ]
    };
  },
  methods: {
    ucFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
  }
});
<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />

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

<div id="app">
  <b-table :items="items" :fields="fields" small bordered striped sticky-header no-border-collapse responsive>
  </b-table>
</div>
...