Buefy-показать результаты массива в виде разделенных тегов в таблице


Buefy-показать результаты массива в виде разделенных тегов в таблице

26.09.2020 09:37:20 Просмотров 52 Источник

Я извлекаю набор данных,в который входит несколько полей в виде списка. Результаты должны быть показаны в таблице Buefy (https://buefy.org/documentation/table) и я хотел бы показать элементы списка в виде отдельных тегов (https://buefy.org/documentation/tag/) в ячейке таблицы.

Приведенный ниже код имитирует эту проблему. Результатом этого является отображение данных во втором столбце в виде обычного текста Value1, Value2, Value3.

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

Я бы хотел, чтобы в ячейке списка это выглядело примерно так:

enter image description here

Код для воспроизведения:

<template>
    <b-table :data="data" :columns="columns"></b-table>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    { 'id': 1, 'list': ["Value1","Value2","Value3"] },
                    { 'id': 2, 'list': ["Value1","Value2","Value3"] },
                    { 'id': 3, 'list': ["Value1","Value2","Value3"] }
                ],
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                    },
                    {
                        field: 'list',
                        label: 'List',
                    }
                ]
            }
        }
    }
</script>
У вопроса есть решение - Посмотреть?

Ответы - Buefy-показать результаты массива в виде разделенных тегов в таблице / Buefy - Show array results as separated tags in table

Является ответом!
Boussadjra Brahim

26.09.2020 10:04:22

Попробуйте выполнить следующий пользовательский рендеринг и добавьте помощник класса mr-2, чтобы освободить место между тегами :

  <b-table :data="data">
    <b-table-column field="id" label="ID" centered v-slot="props">
      {{props.row.id}}
    </b-table-column>
    <b-table-column field="list" label="List" centered v-slot="props">
      <span v-for="item in props.row.list" class="tag mr-2">
        {{item}}
      </span>
    </b-table-column>
  </b-table>

Живая демонстрация

Помочь в развитии проекта:
Закрыть X