vue渲染三级表格

<template>
	<div>
		<table
			cellspacing="0"
			border="1">
			<tr>
				<th v-for="(item,index) in title">
					{{item.title}}
				</th>
			</tr>
			<template v-for="(item,index) in list">
				<!-- 一级 -->
				<tr>
					<td :rowspan="item.line+item.list.length+1">
						{{item[Object.keys(item)[0]]}}
					</td>
				</tr>
				<!-- 二级 -->
				<template v-for="(item2,index2) in item.list">
					<tr>
						<td :rowspan="item2.skuList.length+1">
							{{item2[Object.keys(item2)[1]]}}
						</td>
					</tr>
				<!-- 三级 -->
					<tr v-for="(item3,index3) in item2.skuList">
						<td v-for="(item4,key,index4) in item3"
							v-if="key != 'skuId'">
							<div v-if="title[index4+1].isInput">
								<InputNumber
									 :min="0"
									 :max='99'
									 size="small"
									 style="width:50px"
									 v-model="item3[Object.keys(item3)[index4]]">
								</InputNumber>
								<!-- 单位，+2为加前面的等级数 -->
								<span v-if="title[index4+1].unit">{{title[index4+1].unit}}</span>
							</div>
							<div v-else>
								<span v-if="key == 'directRelationRate' && item4 == 0 || key == 'indirectRelationRate' && item4 == 0 ">
									未设置
								</span>
								<span v-else>
									{{item4}}
									<span v-if="title[index4+1].unit">{{title[index4+1].unit}}</span>
								</span>

							</div>
						</td>
					</tr>
				</template>
			</template>
		</table>
	</div>
</template>
<script>
	export default{
		data(){
			return{
		        title:[
					{
						title:'产品分类',
						key:'goodsCategoryName'
					},{
						title:'产品名称',
						key:'name'
					},{
						title:'规格类型',
						key:'name'
					},{
						title:'价格',
						key:'price',
						unit:'元'
					},{
						title:'成本',
						key:'cost',
						unit:'元'
					},{
						key:'directRelationRate',
						title:'直接关系消费获得佣金',
						unit:'%'
					},{
						key:'indirectRelationRate',
						title:'间接关系消费获得佣金',
						unit:'%'
					}
				],
		        list:[
		        	{
		        		goodsCategoryName: "222",
		        		list: [ {  id: "GS1557979320284",
		        		 		   name: "999",
		        		 		   skuNumber: 4,
		        		 		   skuList: [ 
		        		 			   { skuId: "SKU_835417f7",
		        		 				 name: "罐装圆形",
		        		 				 price: 12,
		        		 				 cost: 12,
		        		 				 directRelationRate: 0,
		        		 				 indirectRelationRate: 0 
		        		 			   },
		        		 			   { skuId: "SKU_65dd00c9",
		        		 			   	 name: "袋装圆形",
		        		 			   	 price: 21,
		        		 			   	 cost: 21,
		        		 			   	 directRelationRate: 0,
		        		 			   	 indirectRelationRate: 0 
		        		 			   },
		        		 			   { skuId: "SKU_d0b6a62b",
		        		 			     name: "罐装方形",
		        		 			     price: 44,
		        		 			     cost: 44,
		        		 			     directRelationRate: 0,
		        		 			     indirectRelationRate: 0 
		        		 			   },
		        		 		   ] 
		        		 		}, { id: "GS1557979320284",
		        		 		   name: "999",
		        		 		   skuNumber: 4,
		        		 		   skuList: [ 
		        		 			   { skuId: "SKU_835417f7",
		        		 				 name: "罐装圆形",
		        		 				 price: 12,
		        		 				 cost: 12,
		        		 				 directRelationRate: 0,
		        		 				 indirectRelationRate: 0 
		        		 			   },
		        		 			   { skuId: "SKU_65dd00c9",
		        		 			   	 name: "袋装圆形",
		        		 			   	 price: 21,
		        		 			   	 cost: 21,
		        		 			   	 directRelationRate: 0,
		        		 			   	 indirectRelationRate: 0 
		        		 			   },
		        		 			   { skuId: "SKU_d0b6a62b",
		        		 			     name: "罐装方形",
		        		 			     price: 44,
		        		 			     cost: 44,
		        		 			     directRelationRate: 0,
		        		 			     indirectRelationRate: 0 
		        		 			   },
		        		 		   ] 
		        		 		},],
		        		line: 6 
		        	}
		        ]
			}
		}
	}
</script>
<style scoped>
	table{
		border: 1px solid #d1d1d1;
		border-collapse: collapse;
		text-align: center;
	}
	table>tr>th{
		background: #f8f8f9;
		padding:5px;
		border-color: #d1d1d1;
	}
	td{
		padding:10px;
		border-color: #d1d1d1;
		width: 10%;
	}
</style>