Как отрисовать многомерный массив в таблице?

Question

[slaxik123]

Нужно отрисовать многомерный массив в таблице. Если длина вложенного массива равна единице, то нужно просто вывести его как есть; если больше единицы, то нужно добавить кнопку "+" и выводить в таблице только первый элемент, при нажатии на "+", в этой же таблице после этой строки добавлять строки с остальными элементами этого подмассива.

Comments

[Дима Долготер]

массив в массиве или обьект в массиве?

[slaxik123]

SpiderPigAndCat,
Массивы объектов внутри одного большого массива

[Дима Долготер]

let arr=[
  {name:"pika1", lastname:"chu1"},
   {name:"pika2", lastname:"chu2"},
   {name:"pika3", lastname:"chu3"},
   {name:"pika4", lastname:"chu4"},
];
for (let ObjFromArr of arr) { //перебираем массив
  console.log(ObjFromArr.name+ObjFromArr.lastname) //если знаем ключи
  for (let objItem in ObjFromArr) { //перебираем обьект
  console.log(ObjFromArr[objItem])  // если не знаем  ключи
   
 }
}

в массиве проверяешь длину и если больше одного  добавляешь плюс. остальные элементы скрываешь  визуально, потом просто вешаешь класс по клику.

 Щас занят пока. если через 4-5 часов не разберешься, то вместе сделаем.

Тут кодепен с подключенным vue можешь пока там под...

[slaxik123]

SpiderPigAndCat, Спасибо за помощь, разобрался)

Answer 1

[0xD34F]

Сделать компонент, предназначенный для отображения одного элемента массива (т.е., одного вложенного массива). Корневым узлом будет tbody - их в таблице может быть несколько. Нулевой элемент переданного массива отображается всегда, а остальные по условию. Как-то так:

props: [ 'items' ],
data: () => ({
  showAll: false,
}),

<tbody>
  <tr>
    <td>{{ items[0] }}</td>
    <td>
      <button
        v-if="items.length > 1"
        v-text="showAll ? '-' : '+'"
        @click="showAll = !showAll"
      ></button>
    </td>
  </tr>
  <template v-if="showAll">
    <tr v-for="n in items.slice(1)">
      <td>{{ n }}</td>
      <td></td>
    </tr>
  </template>
</tbody>

Ну и создаёте столько экземпляров этого компонента, сколько в массиве элементов:

<table>
  <v-tbody v-for="n in items" :items="n" />
</table>

https://jsfiddle.net/vx3k8bsh/

Comments

[slaxik123]

Сделал как у вас приблизительно как у Вас предлагается, проблема осталась только что при нажатии все открываются(

<tbody  v-for="n in apps" v-bind:key="n.id"> 
  <tr>
    <td class="actions">
      <span
        v-if="n.length > 1"
        v-text="showAll ? '-' : '+'"
        @click="showAll = !showAll"
      ></span>
    </td>
    <td>{{n[0].client }}</td>
    <td>{{n[0].fromCity}}</td>
    <td>{{n[0].toCity}}</td>
    <td>{{n[0].date}}</td>
    <td>{{n[0].prepayment}}</td>
    <td>{{n[0].rate}}</td>
    <td>{{n[0].type}}</td>
    <td>{{n[0].status}}</td>
    <td>{{n[0].logist}}</td>
    <td>{{n[0].note}}</td>
  </tr>
  <template v-if="showAll">
      <td class="actions"></td>
      <tr v-for="i in n.slice(1)" v-bind:key="i._id">
          <td></td>
          <td>{{i.client }}</td>
          <td>{{i.fromCity}}</td>
          <td>{{i.toCity}}</td>
          <td>{{i.date}}</td>
          <td>{{i.prepayment}}</td>
          <td>{{i.rate}}</td>
          <td>{{i.type}}</td>
          <td>{{i.status}}</td>
          <td>{{i.logist}}</td>
          <td>{{i.note}}</td>
      </tr>
  </template>
  data()=>{
return{
showAll:false
}}
</tbody>

[0xD34F]

slaxik123, я не понял, что вы сказали. Попробуйте ещё раз.

[slaxik123]

0xD34F, При нажатии на + открываются все строки, проблема мне понятно т.к. глобальный идентификатор открытия меняется, надо как-то привязать индекс массива который открывается при нажатии на + с идентификатором открытия

[0xD34F]

slaxik123, а вот нечего было самодеятельностью заниматься. Делайте не "приблизительно", а в точности так, как показано - отдельный компонент для отображения элементов массива.

[slaxik123]

0xD34F, Спасибо, взял себя в руки все получилось.

[slaxik123]

0xD34F,

<tbody>
    <tr @click="selectedRow(items[0],0)" v-bind:class="{lols: checkedIndex === 0}">
      <td class="actions">
        <span
          style="cursor:pointer;font-size:20px;font-weight:bold;"
          v-if="items.length > 1"
          v-text="showAll ? '-' : '+'"
          @click="showAll = !showAll">
        </span>
      </td>
      <td>{{items[0].client }}</td>
      <td>{{items[0].fromCity}}</td>
      <td>{{items[0].toCity}}</td>
      <td>{{items[0].date}}</td>
      <td>{{items[0].prepayment}}</td>
      <td>{{items[0].rate}}</td>
      <td>{{items[0].type}}</td>
      <td>{{items[0].status}}</td>
      <td>{{items[0].logist}}</td>
      <td>{{items[0].note}}</td>
    </tr>

    <template v-if="showAll">

      <tr v-for="(n,index) in items.slice(1)" v-bind:key="n._id"  @click="selectedRow(n,index)"  v-bind:class="{lols: checkedIndex === index}">
          <td class="actions"></td>
          <td>{{n.client }}</td>
          <td>{{n.fromCity}}</td>
          <td>{{n.toCity}}</td>
          <td>{{n.date}}</td>
          <td>{{n.prepayment}}</td>
          <td>{{n.rate}}</td>
          <td>{{n.type}}</td>
          <td>{{n.status}}</td>
          <td>{{n.logist}}</td>
          <td>{{n.note}}</td>
      </tr>

    </template>

  </tbody>

data: () => ({
      checkedIndex:-1,
    }),

selectedRow(app,ind){
            this.checkedIndex = this.checkedIndex === ind ? -1 : ind;

        // eslint-disable-next-line no-console
      console.log(this.checkedIndex);
        
      }

Не могу стили поменять у одного элемента из списка открывающихся элементов, выделяются все элементы это списка, с [0] работает как должен. Объясни пожалуйста..

[slaxik123]

[0xD34F]

slaxik123, похоже, кто-то не знает, что индексация массивов начинается с 0.