Javascript 如何在Vue Js中循环通过Json数组中的子数组？

我有一个JSON数据数组，我需要遍历外部和内部子数组，并需要创建一个表。下面是示例数组

    {
        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>

注意：我使用的是元素Ui表-

我需要一张这样的桌子

但是我得到的那张桌子是

请帮助我循环内部细分曲面并创建表。

---

代码框-

我已经构建了一个纯HTML表的快速示例，它应该让您了解如何使用UI组件库实现相同的结果

newvue({
el:“应用程序”，
数据：{
内容：[
{
类别：'I'，
subDdiv：[
{
分区:"A"，
主题：['Subject1'、'Subject2'、'Subject3']
},
{
分区：‘B’，
主题：['Subject1'、'Subject2'、'Subject3']
},   
]
},
{
类别:"II",，
subDdiv：[
{
分区:"A"，
主题：['Subject1'、'Subject2'、'Subject3']
},
{
分区：‘B’，
主题：['Subject1'、'Subject2'、'Subject3']
},   
]
}
]
}
})

td，th{
填充：5px20px；
}

等级
Div
{{item.class}}
{{subItem.div}}

我构建了一个纯HTML表的快速示例，它应该让您了解如何使用UI组件库实现相同的结果

newvue({
el:“应用程序”，
数据：{
内容：[
{
类别：'I'，
subDdiv：[
{
分区:"A"，
主题：['Subject1'、'Subject2'、'Subject3']
},
{
分区：‘B’，
主题：['Subject1'、'Subject2'、'Subject3']
},   
]
},
{
类别:"II",，
subDdiv：[
{
分区:"A"，
主题：['Subject1'、'Subject2'、'Subject3']
},
{
分区：‘B’，
主题：['Subject1'、'Subject2'、'Subject3']
},   
]
}
]
}
})

td，th{
填充：5px20px；
}

等级
Div
{{item.class}}
{{subItem.div}}

为了能够在一个循环中循环数据（这是您使用的布局所要求的），您应该展平数据：

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>

---

为了能够在一个循环中循环数据（这是您使用的布局所要求的），您应该展平数据：

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>

div数组中的自身。我想你需要迭代subDdiv。@MuhammadLahin是的，请帮我迭代到subDiv@pala请在数组中使用此代码沙盒-div本身。我想你需要迭代subDdiv。@MuhammadLahin是的，请帮我迭代到subDiv@pala请使用此代码沙盒-