Buefy - Динамическая загрузка полей в таблице с настройкой

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

Поэтому вместо определения каждого столбца в коде я хотел бы, чтобы он загружал столько столбцов, сколько есть в данных, с использованием предоставленного шаблона. Для этого мне нужно заменить {{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>

person Vincent    schedule 27.09.2020    source источник


Ответы (1)


Не могу поверить, что я не пробовал это раньше, но следующее помогло:

props.row[column.field]
person Vincent    schedule 29.09.2020