Vue + Element实现表格嵌套表格_element中table中包含table

<template>
	<div class="shopList">
		<el-table :data="tableData" style="width: 100%">
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-table
						:data="props.row.sonData"
						style="width: 100%;padding: 10px;"
					>
						<el-table-column
							v-for="(value, id, index) in sonColumns"
							:label="value.name"
							:prop="value.propName"
							:key="index"
						>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button
									:type="primary"
									@click="changeStatus()"
									>{{
										props.row.status ? "完成" : "修改"
									}}</el-button
								>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
			//对外层的表格表头进行了遍历循环
			<el-table-column
				v-for="(value, key, index) in parentsCloums"
				:label="value.name"
				:prop="value.propName"
				:key="index"
			>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
export default {
	name: "shopList",
	components: {},
	data() {
		return {
			parentsCloums: [
				//外层table的表头
			// 最外层table的表头数据
				{
					name: "序号序号",
					id: "1",
					propName: "index"
				},
				{
					name: "商品类型商品类型",
					id: "2",
					propName: "type"
				},
				{
					name: "商品编号商品编号",
					id: "3",
					propName: "no"
				},
				{
					name: "商品名称商品名称",
					id: "4",
					propName: "spname"
				},
				{
					name: "食材食材",
					id: "5",
					propName: "shicai"
				},
				{
					name: "商品价格商品价格",
					id: "6",
					propName: "price"
				},
				{
					name: "商品图片商品图片",
					id: "7",
					propName: "pic"
				},
				{
					name: "当前库存当前库存",
					id: "8",
					propName: "kucun"
				},
				{
					name: "创建时间创建时间",
					id: "9",
					propName: "time"
				}
			],
			tableData: [
				//外层table的数据
				// 最外层table数据,里面的sonData为嵌套表格的数据
				{
					id: 1,
					index: "1",
					type: "蛋糕蛋糕",
					no: "2315436",
					spname: "草莓甜心草莓甜心",
					shicai: "草莓莓，奶油油，蛋糕糕",
					price: "¥33.00",
					pic: "10333",
					kucun: "100",
					time: "2022-09-08 12:00:00",
					sonData: [
						//把要嵌套的内层table数据，放在父级table的一个字段里
						{
							index: "1",
							rkTime: "2022-09-08 12:00:00",
							rkNum: "50",
							operation: ""
						},
						{
							index: "1",
							rkTime: "2022-09-08 12:00:00",
							rkNum: "50",
							operation: ""
						}
					]
				},
				{
					id: 2,
					index: "2",
					type: "蛋糕蛋糕",
					no: "2315436",
					spname: "草莓甜心草莓甜心",
					shicai: "草莓莓，奶油莓，蛋糕莓",
					price: "¥33.00",
					pic: "10333",
					kucun: "100",
					time: "2022-09-08 12:00:00"
				},
				{
					id: 3,
					index: "3",
					type: "蛋糕莓",
					no: "2315436",
					spname: "草莓甜心莓",
					shicai: "草莓莓，奶油莓，蛋糕莓",
					price: "¥33.00",
					pic: "10333",
					kucun: "100",
					time: "2022-09-08 12:00:00"
				}
			],
			sonColumns: [
				//内层table的表头
				// 嵌套内层表格的表头
				{
					name: "序号序号",
					id: "1",
					propName: "index"
				},
				{
					name: "入库时间时间",
					id: "2",
					propName: "rkTime"
				},
				{
					name: "入库数量数量",
					id: "3",
					propName: "rkNum"
				}
			]
		};
	},
	methods: {}
};
</script>
<style scoped></style>