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