Bootstrap-Vue：如何获取动态表头？

Question

当前正在使用Bootstrap-vue。我需要生成b-table，但要使用从api获取的动态标头值，不确定如何执行此操作。

我已经尝试了常规方法来设置数据中的字段，但效果很好，但是如果尝试设置计算字段，则表中没有任何值。`

computed: {
    fields () {
      return ['date', ...this.scheduler.times]
    }
  }

`

this.scheduler.times是从api接收的数据，其中包含如下数组。而且这个数组可以增加更多的时间（来自api的数据）`

[
    {
        "id": 1,
        "start": "01:30:00",
        "end": "09:30:00"
    },
    {
        "id": 2,
        "start": "10:00:00",
        "end": "13:00:00"
    }
]

`

预期的结果是我的列标题中包含来自api的时间和添加的日期列。

我可以使用矩来生成一系列日期，但不确定如何将其映射到b-table

以下是我想要得到的结果的屏幕截图：

任何帮助将不胜感激。谢谢

Answer 1

我认为这是您正在寻找的东西：

<b-table :items="items" :fields="fields">
    <template v-for="field in dynamicFields" v-slot:[`cell(${field.key})`]="{ item }">
</b-table>

在脚本中：

this.dynamicFields.push({key: 'someTestKey', label: '1:30AM - 2:30AM'})