Стоит ли использовать такую таблицу для вывода большого массива даных?

Question

[Павел Воронюк]

Всем привет.

Нужно было сделать Таблицу, в которой по клике на строку, открывать дополнительный див в котором остальная информация с смежных таблиц. То-есть информации будет очень много. На бэкенде используем Laravel, на фронтэнде Vue

Так как готового решения удовлетворяющего все пункты не было, сделал сам, используя дивы как таблицу, и аккордеон, чтобы все красиво сворачивалось. Получился такой плагин )) - https://codepen.io/pawlek/full/jpawZe/

Но осталось пару вопросов:

1. Для большого количества данных, подойдет ли такое решение? (начитался, что лучше использовать table )
2. Если
<table> <tr> <td>
то как сделать так же как с дивами (смотри ссылку више).
3. Получиться ли все это связать с Laravel/Vue, так как понятное дело что .card будет в For loop и в тэгах нужно будет менять data свойства:

<div data-toggle="collapse" data-target="<b>#collapse1</b>" aria-expanded="true" aria-controls="<b>collapse1</b>" id="<b>heading1</b>"">

<div id="<b>collapse1</b>" class="collapse" aria-labelledby="heading1" data-parent="#accordionExample">

или data менять с jquery.. но тогда если можно подскажите как )

Сапсибо

Answer 1

[Сергей delphinpro]

пойдет для любого кол-ва данных.
связать с vue не проблема, вам всего-то нужно уникальные идентификаторы сделать

<div v-for="(item, index) in cards">
  <div :id="'collapse' + index">
</div>

Если таких компонентов будет больше одного на странице, то для уникальности задействуйте свойство _uid

<div :id="uniqId('collapse', index)">

и метод

methods: {
  uniqId(prefix, index) {
    return prefix + this._uid + index;
  }
}

Comments

[Павел Воронюк]

Спасибо!