Buefy - 通过自定义动态加载表中的字段

Question

我正在使用下面的代码来加载表格，效果很好。但是数据集的字段可能会有所不同，所以我希望表格的模板是动态的。

因此，我希望它使用提供的模板加载与数据中一样多的列，而不是在代码中定义每一列。为此，我需要将 {{props.row.uid}} 替换为类似的东西，其中“uid”部分是用“column.field”中的值动态加载的。

我一直无法弄清楚如何做到这一点......

<template>
    <b-table :data="data">
    <template v-for="column in columns">
        <b-table-column :key="column" :field="column.field" :label="column.label" centered v-slot="props">
            <template v-if="column.type === 'string'">
                <span>{{props.row.uid}}</span>
            </template>
            <template v-if="column.type === 'list'">
                <span v-for="item in props.row.list" :key="item" class="tag mr-2">{{item}}</span>
            </template>
        </b-table-column>
    </template>
    </b-table>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    { 'uid': 1, 'list': ["Value1","Value2","Value3"] },
                    { 'uid': 2, 'list': ["Value1","Value2","Value3"] },
                    { 'uid': 3, 'list': ["Value1","Value2","Value3"] }
                ],
                columns: [
                    {
                        field: 'uid',
                        label: 'UID',
                        type: 'string'
                    },
                    {
                        field: 'list',
                        label: 'List',
                        type: 'list'
                    }
                ]
            }
        }
    }
</script>

Answer 1

不敢相信我没有早点尝试这个，但以下工作完成了：

props.row[column.field]