Vue.js中如何遍历JSON数组子数组并生成Element UI表格？

我来帮你搞定这个Element UI表格的问题哈！你的核心问题在于原始数据是嵌套数组结构，但Element UI的Table组件是基于一维数组来渲染每一行的，直接绑定原数组的话，它没法自动拆解内层的subDdiv数组，所以才会得不到预期的结果。

咱们可以通过扁平化数据的方式来解决，具体步骤如下：

1. 把嵌套数据转成一维数组 #

你可以在组件里用computed属性来处理数据，把每个班级下的每个div项和对应的class组合成单独的对象，生成一个新的一维数组：

computed: {
  flattenedTableData() {
    const result = [];
    // 遍历外层的班级数组
    this.array.forEach(classItem => {
      // 遍历每个班级下的div子数组
      classItem.subDdiv.forEach(divItem => {
        result.push({
          class: classItem.class,
          div: divItem.div,
          // 如果需要保留科目数组也可以带上，后面按需展示
          subjects: divItem.subjects
        });
      });
    });
    return result;
  }
}

2. 修改Table组件的数据源 #

把原来绑定的array换成我们处理好的flattenedTableData，这样Table就能正确识别每一行的class和div数据了：

<el-table :data="flattenedTableData" style="width: 100%">
  <el-table-column 
    v-for="label in labels" 
    :key="label" 
    :prop="label" 
    :label="label">
  </el-table-column>
  <!-- 可选：如果需要展示科目，可以加这一列，用自定义模板美化展示 -->
  <el-table-column label="Subjects">
    <template slot-scope="scope">
      <el-tag 
        v-for="subject in scope.row.subjects" 
        :key="subject" 
        size="small" 
        style="margin-right: 6px;">
        {{ subject }}
      </el-tag>
    </template>
  </el-table-column>
</el-table>

这样处理后，表格就会生成和预期一致的样式：每一行对应一个Class+Div的组合，完美展示你想要的结构~

内容的提问来源于stack exchange，提问作者Manu