el-table 动态多级表头以及数据

欢迎来到我的世界

效果图:
除了上报单位,后面的表头以及下面的数据都是动态获取的

代码如下

<el-table :data="tableData2" @selection-change="handleSelectionChange2" style="width: 98%;" stripe>
	<el-table-column prop="orgName" label="上报单位" align="center" width="150" show-overflow-tooltip></el-table-column>
	// 我们这里先循环下面遍历出来的(tableHeaders ==>所有的动态表头)
	// 因为我们的 计划数/批复数/表头 三个数据是放到一个对象里面的恶
	// 所以我们循环数表头之后,可以根据他的index来取出对应表头那组数据里面的计划数/批复数
	<el-table-column v-for="(item, index) in tableHeaders" :key="index" :label="item.label" :prop="item.prop" align="center">
		<el-table-column label="计划数">
			<template slot-scope="scope">
				<span>{{scope.row.regList[index].need}}</span>
			</template>
		</el-table-column>
		<el-table-column label="批复数">
			<template slot-scope="scope">
				<span>{{scope.row.regList[index].reply}}</span>
			</template>
		</el-table-column>
	</el-table-column>	
</el-table>

// 这里是方法里面请求获取数据
getdata() {
	let param = {
		id:this.rows.id,
		orgName:this.Form.orgName,
	}
	reagentData.replyfordetails(param).then((res) =>{
		if(res.code == 200) {
		// 我们先把动态的表头遍历出来,push到一个tableHeaders 空数组里面,我们上面的动态表头就循环这个数组
			this.tableHeaders = []
			// 因为两组数据的表头肯定是一样的,所以我们只需要遍历其中一组的表头名字就可以了
			for (let i of res.data.records[0].regList) {
				let obj = {
					label: i.regName,
					prop: ''
				}
				this.tableHeaders.push(obj)
			}
			this.tableData2 = res.data.records
		}

// 响应数据
data:{
	records:[
			{
					orgName: '郑州市疾病预防控制中心',
					regList:[
						{need:"8000",reply:"7000",regName:"HIV酶免试剂"},
						{need:"8000",reply:"7000",regName:"HIV快检试剂"},
						{need:"5000",reply:"5000",regName:"梅毒快检试剂"},
						{need:"3000",reply:"3000",regName:"梅毒TRUST试剂"},
						{need:"6000",reply:"5000",regName:"梅毒TPPA/TPHA试剂"},
					]
			},
			{
				orgName: '河南省疾病预防控制中心',
				regList:[
						{need:"10000",reply:"9000",regName:"HIV酶免试剂"},
						{need:"10000",reply:"9000",regName:"HIV酶免试剂"},
						{need:"10000",reply:"8000",regName:"HIV酶免试剂"},
						{need:"8000",reply:"7000",regName:"HIV酶免试剂"},
						{need:"8000",reply:"7000",regName:"HIV酶免试剂"},
				]
			}
		]
}

这对后台返回的数据格式有一定的要求!!!