Buefy - 将数组结果显示为表格中的分隔标签答案

【问题标题】：Buefy - Show array results as separated tags in tableBuefy - 将数组结果显示为表格中的分隔标签
【发布时间】：2021-01-12 19:15:21
【问题描述】：

我正在检索一个包含几个字段作为列表的数据集。结果需要显示在 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>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component buefy

【解决方案1】：

尝试以下自定义渲染并添加类助手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>

Live demo

【讨论】：