具有动态列的Vuejs表已连接到flask API

Question

我正在使用Flask，SQLAlchemy和Vuejs构建一个Web应用程序。我已经构建了一个API，可以传递数据库中的数据以显示在作为Vuejs组件构建的表中。我希望表组件尽可能通用，以便在不同的地方重复使用。 对于我的第一次尝试，我的API返回数据如下：

data = [
{
firstName: ‘Joe’,
    lastName: ‘Bradley’,
    email: ‘joe@company.com
},
{
firstName: ‘Mary’,
    lastName: ‘Kelly’,
    email: ‘mary@company.com
},
{etc....}
]

现在，我的Vue表组件具有硬编码的列标题，但我希望表组件能够根据接收到的数据动态更改列数。我不想对标题进行硬编码。我可能有一个不同的表，显示4个完全不同的数据列。如何在Vue组件中设置列标题？

我有一些想法：

• 在API响应中包含列标题的列表，以便 表格知道要使用哪些标题？
• 创建一个单独的API端点，该端点返回列的映射 到数据库字段名称的标题。
• 只需将标题硬编码到Vue表中并定义一个新表 每次我要显示不同的数据集时都使用该组件。

有人可以针对这种情况提供最佳实践建议吗？我自学成才，对此很新，因为您可能已经从问题中收集到了。预先感谢！