Таблица Vuejs с динамическими столбцами, подключенными к API фляги - PullRequest
0 голосов
/ 09 февраля 2019

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

Кто-нибудь может предложить какой-либо совет по лучшей практике в такой ситуации?Я самоучка и довольно новичок в этом, как вы, наверное, поняли из вопроса.Заранее спасибо!

...