Мы создаем таблицу сравнения в VueJS, используя динамические данные. Количество сравниваемых предметов может варьироваться.
Структура данных выглядит следующим образом:
Мы хотим создать таблицу в VueJS, в которой столбцы будут иметь одинаковую ширину, а все строки будут выровнены.
+------------+------------+------------+------------+
|Item 1 |Item 2 |Item 3 |Item 4 |
| | | | |
|Foo bar oof |Rab foo |Bar rab abr |Oof |
|rab ofo | |Foo oof ofo | |
| | | | |
+------------+------------+------------+------------+
|Feature 1 |Feature 1 |Feature 1 |Feature 1 |
| | | | |
|Bar rab abr |Foo oof ofo |Oof Foo Bar |Rab oof bar |
|foo bar oof |Rab foo |Bar rab abr |oof |
|rab ofo | |Foo oof ofo | |
| | | | |
+------------+------------+------------+------------+
|Feature 2 |Feature 2 |Feature 2 |Feature 2 |
| | | | |
|Foo oof ofo |Oof foo |Bar rab abr |Ofo rab ofo |
|rab oof bar | |oof bar rab |bar |
| | | | |
+------------+------------+------------+------------+
Изначально я думал об использовании <table>, но данные генерируются в столбцах, а не в строках, поэтому их трудно генерировать динамически.
Затем я подумал, можно ли использовать flex, чтобы содержимое можно было генерировать по одному столбцу за раз, а затем форматировать в таблицу. Пока что мне не повезло с этим подходом, так как нам нужно, чтобы каждая строка была высотой максимального содержимого.
Вот пример flexbox, который случайным образом генерирует количество элементов / контента: https://jsfiddle.net/BaronGrivet/rwhebczL/1/
Можно ли использовать flexbox для достижения того, чего мы хотим?
Если нет, каков наилучший подход к имеющейся у нас структуре данных?