element table组件表格里面套表格

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

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进行了区分。

最后实现如下效果

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