Я получаю набор данных, содержащий несколько полей в виде списка. Результаты необходимо отобразить в таблице Buefy (https://buefy.org/documentation/table ), и я хотел бы показать элементы списка как отдельные теги (https://buefy.org/documentation/tag/) в ячейке таблицы.
Приведенный ниже код моделирует проблему. Результатом этого является отображение данных во втором столбце в виде обычного текста Value1, Value2, Value3.
Это не только плохо выглядит, но и из-за отсутствия пробелов между значениями таблица становится слишком широкой для экрана, и из-за этого другие столбцы больше не видны.
Я бы хотел, чтобы в ячейке списка он выглядел примерно так:
Код для воспроизведения:
<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>