Как создать диаграмму в ячейке таблиц Bootstrap - vue? - PullRequest
Новая
       128

Как создать диаграмму в ячейке таблиц Bootstrap - vue?

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

Я пытаюсь использовать таблицы Bootstrap - vue. Я пытаюсь добавить столбчатую «диаграмму», где я могу отображать данные в виде диаграммы. Примерно так:

введите описание изображения здесь

Меня интересует диаграмма типа "график" (не показана на изображении). Это что-то, что можно сделать с таблицами Bootstrap - vue?

1 Ответ

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

слот: ячейка Вот код из bootstrap - vue .org: Внутри шаблона вы можете поместить свой элемент диаграммы. И используйте «данные», чтобы получить нужную информацию. Подобно data.item - это все, что для этой строки 

<template>
  <div>
    <b-table small :fields="fields" :items="items" responsive="sm">
      <!-- A virtual column -->
      <template v-slot:cell(index)="data">
        {{ data.index + 1 }}
      </template>

      <!-- A custom formatted column -->
      <template v-slot:cell(name)="data">
        <b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
      </template>

      <!-- A virtual composite column -->
      <template v-slot:cell(nameage)="data">
        {{ data.item.name.first }} is {{ data.item.age }} years old
      </template>

      <!-- Optional default data cell scoped slot -->
      <template v-slot:cell()="data">
        <i>{{ data.value }}</i>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: [
          // A virtual column that doesn't exist in items
          'index',
          // A column that needs custom formatting
          { key: 'name', label: 'Full Name' },
          // A regular column
          'age',
          // A regular column
          'sex',
          // A virtual column made up from two fields
          { key: 'nameage', label: 'First name and age' }
        ],
        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 }
        ]
      }
    }
  }
</script>

Вот документация https://bootstrap-vue.org/docs/components/table#tables Go для пользовательского рендеринга данных

...