Buefy

Question

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

因此，我不想在代码中定义每一列，而是希望它使用提供的模板加载与数据中一样多的列。为此，我需要将 {{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]

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

Buefy - Dynamically load fields in table with customization

vue.js