Как l oop через подмассив в массиве Json в Vue Js?

Question

У меня есть массив данных JSON, мне нужно l oop через внешний, а также внутренний подмассив, и мне нужно создать таблицу. Ниже представлен образец массива

    {
        class:'I',
        subDdiv:[
            {
                div: 'A',
                subjects:['Subject1','Subject2','Subject3']
            },
            {
                div: 'B',
                subjects:['Subject1','Subject2','Subject3']
            },   
        ]
}
    {
        class:'II',
        subDdiv:[
            {
                div: 'A',
                subjects:['Subject1','Subject2','Subject3']
            },
            {
                div: 'B',
                subjects:['Subject1','Subject2','Subject3']
            },   
        ]
}

Теперь мне нужно создать таблицу с заголовком строки как Class и Div

labels :['class','div']

Написанный мной код не дает фактических результатов,

<el-table :data="array" style="width: 100%">
  <el-table-column v-for="label in labels" :key="label"
   :prop="label"
   :label="label">
   </el-table-column>
 </el-table>

Примечание: я использую Element Ui Table - https://element.eleme.io/# / en-US / component / table

Мне нужна такая таблица

Но в таблице я получил

Пожалуйста, помогите мне oop через внутренний subDiv и создайте таблицу. поле кода - https://codesandbox.io/s/vigilant-wildflower-zgiq2?file= / src / App. vue

Answer 1

Чтобы иметь возможность l oop данных в одном l oop (это то, что требует макет, который вы используете), вы должны сгладить свои данные:

computed: {
    reducedArray() {
      return this.dataArray.reduce((prev, obj) => {
        let flatted = obj.subDdiv.map(item => {
          let subdiv = {};
          subdiv["class"] = obj.class;
          subdiv["div"] = item.div;
          return subdiv
        });
        return [...prev, ...flatted];
      }, []);
    }
  }

Затем вы можете использовать свой код как есть, зациклив плоский массив:

<el-table :data="reducedArray" style="width: 100%">
      <el-table-column v-for="label in labels" :key="label" :prop="label" :label="label"></el-table-column>
</el-table>

Answer 2

Я создал быстрый пример с чистыми HTML таблицами, он должен дать вам представление о том, как вы можете достичь того же результата и с вашей библиотекой компонентов пользовательского интерфейса.

new Vue({
  el: "#app",
  data: {
    contents: [
     {
        class:'I',
        subDdiv:[
            {
                div: 'A',
                subjects:['Subject1','Subject2','Subject3']
            },
            {
                div: 'B',
                subjects:['Subject1','Subject2','Subject3']
            },   
        ]
},
    {
        class:'II',
        subDdiv:[
            {
                div: 'A',
                subjects:['Subject1','Subject2','Subject3']
            },
            {
                div: 'B',
                subjects:['Subject1','Subject2','Subject3']
            },   
        ]
}
    ]
   }
})

td, th {
  padding: 5px 20px;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Class</th>
        <th>Div</th>
      </tr>
    </thead>
    <tbody>
      <template v-for="item in contents">
        <tr v-for="subItem in item.subDdiv">
          <td> {{ item.class }} </td>
          <td> {{ subItem.div }} </td>
        </tr>
      </template>
    </tbody>
  </table>
</div>