el-tbale如何构造动态二级表头

Question

问题描述

是这样的，我这边要做1个动态二级表头的表格。
原型如下：

整个表格分为2部门，左边的静态的，及右边动态构造的二级表头。

数据格式暂时定为如下：

相关代码

然后我的代码如下，这里的mytableData就是上面图中的list数据。
mytableData:[

      {
        "year":2019,
        "month":9,
        "name":"陈xx",
        "dept":"某部门",
        "items":[
          {
            "areaname":"华南地区",
            "details":[
              {
                "projectName":"项目1-2018",
                "hours":90
              },
              {
                "projectName":"项目2-2019",
                "hours":85
              }
            ]
          },
          {
            "areaname":"西南地区",
            "details":[
              {
                "projectName":"项目3-2018",
                "hours":90
              },
              {
                "projectName":"项目4-2019",
                "hours":85
              }
            ]
          }
        ]
      }    
    ]

<el-table :data="mytableData">

    <el-table-column label="年份" prop="year"></el-table-column>
    <el-table-column label="月份" prop="month"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="部门" prop="dept"></el-table-column>
    <el-table-column v-for="(item,idx2) in mytableData.items" :key="idx2" :label="item.areaname" >
      <el-table-column v-for="(detail,idx3) in item.details" :key="idx3" :label="detail.projectName" >
        <template v-slot="scope">
          <span>{{ scope.row.hours }}</span>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>

你期待的结果是什么？实际看到的错误信息又是什么？

然后只显示了左边静态部分，动态部分没出来。尴尬，求解。

Answer 1

 <!-- 构造动态表格 -->
      <el-table :data="mytableData" style="width:100%;">
        <el-table-column label="年份" prop="year"></el-table-column>
        <el-table-column label="月份" prop="month"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="部门" prop="dept"></el-table-column>
        <el-table-column label="ceshi" width="0" >
          <template slot-scope="scope">
              <el-table-column v-for="(item,idx2) in scope.row.items" :key="idx2" :label="item.areaname">
                  <el-table-column v-for="(detail,idx3) in item.details" :key="idx3" :label="detail.projectName">
                    <template slot-scope="scope2">
                        <span>{{detail.hours}}</span>
                    </template>
                  </el-table-column>
              </el-table-column>
            </template>
        </el-table-column>
      </el-table>

改一下html，数据出来了，但是又多了1列。。。