element table组件表格里面套表格

在我的项目里面有这样一个需求，表格里面展开项是一个表格，且嵌套的表格头部是动态列。以下是html代码，tableData是外层表格的数据(下面我就将外层表格称为大表格，里面嵌套的表格称为小表格)

<el-table
    :data="tableData"
    align="center"
    stripe>
  <!-- 展开项表格开始位置 type="expand"必须写-->
    <el-table-colum type="expand">
      <template slot-scope="props">
        <!-- 通过props得到大表格的每一列数据，dataList是小表格的数据，通过props.row.dataList获取 -->
        <el-table
          :data="props.row.dataList"
          align="center"
          stripe>
          <el-table-column
            align="center"
            :prop="'goodsDatas.' + item.propName"
            :label="item.propComments"
            v-for="item in header[props.$index]"
            :key="item.id"> 
          </el-table-column>
          <!-- 如果小表格里面有固定列写法如下 -->
          <el-table-column
            align="center"
            :prop="itemCode"
            :label="物资编码"> 
          </el-table-column>
          <!-- 固定列结束位置 -->
        </el-table>
      </template>
    </el-table-colum>
  <!-- 展开项里表格结束位置 -->
    <el-table-column
      align="center"
      prop="itemDescription"
      label="物资描述">
    </el-table-column>
    <!-- 这里可以继续写大表格中的列 -->
  </el-table>

header是小表格动态列的数据，是一个数组，小表格的表头和表内容都是通过v-for循环header得到的。在data中定义header

data() {
	return {
		header: []
	}
}

下面是js代码，获取请求返回的数据data.tableData，展现表格数据

data.tableData.forEach((v) => {
      v.dataList.forEach((_v) => {
        this.header.push(_v.DataListItems);
        // 这里的DataListItems就是小表格中生成动态列需要的数据
      })
    })

因为大表格可能有很多行，而每一行下面都可能有展开项表格，所以如果直接赋值 this.header = _v.DataListItems 就只能获取最后一次循环的值。

注意：因为大表格的数据是一个数组，小表格的数据也是一个数组，小表格的动态列数据也是一个数组，所以v-for="item in header[props.$index]"在这里用$index进行了区分。

最后实现如下效果

也不知道我描述清楚了没有，如果有不清楚或者错误的地方欢迎小伙伴们来信。