实现一个动态表格，需求看图

Question

最好能用el-table，然后就是尝试过嵌套表格循环，但是那做出来效果不尽人意，希望更好的解决方案

Answer 1

引自免费微信小程序：皆我百晓生

当然，根据您的需求描述，您想要实现一个使用 Element UI 的 el-table 组件来展示的动态表格，并且之前的嵌套循环方案效果不够理想。假设您的表格数据结构是一个二维数组或树形结构，每个“期”下面可能有多个子项。

考虑以下解决方案：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="period" label="期" width="180"></el-table-column>
    <!-- 假设子项属性为 'items' -->
    <el-table-column v-for="(item, index) in subColumns" :key="index" :label="item.label" width="100">
      <template slot-scope="scope">
        <span v-if="!Array.isArray(scope.row.items)">
          {{ scope.row.items }}
        </span>
        <el-table v-else :data="scope.row.items" border style="width: 100%">
          <el-table-column v-for="(subItem, subIndex) in item.subColumns" :key="subIndex" :label="subItem.label" width="100">
            <template slot-scope="subScope">{{ subScope.row[subItem.prop] }}</template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 示例数据结构，根据实际需求调整
        {
          period: '第1期',
          items: [
            { name: '子项1', value: '数据1' },
            { name: '子项2', value: '数据2' }
          ]
        },
        // 其他期数据...
      ],
      subColumns: [
        { label: '子项名称', prop: 'name' },
        { label: '子项值', prop: 'value' }
      ]
    };
  }
};
</script>

在这个示例中，tableData 是存储表格数据的对象数组，每个对象包含“期”和其他子项数据（这里以 items 属性为例）。subColumns 存储了子表格列的配置信息，包括标签名和对应的属性名。

请注意，上述代码是基于假设的表格数据结构编写的。请确保将它与您的实际数据结构对齐。如果需要更复杂的动态生成子表格或者子列，请在获取数据后进行计算处理，动态生成 subColumns 和子表格的数据结构。