vue 表格头部创建

<template>
	<view class="content">
		<div class="table">
			<div class="head flexCenterBox">
				<div class="line" v-for="(item, index) in param" :key="index">
					<div v-if="item.con == 1">
						<div class="box_line loflex" :class="'height'+item.lon">
							<div class="box" v-for="(l, il) in item.lon" :key="il">
								{{item.value[il]}}
							</div>
						</div>
					</div>
					<div v-else>
						<div class="box_line" :class="'height'+(item.child?(item.con+item.child.con-1):item.con)" v-for="(k, cl) in item.con" :key="cl">
							<div v-if="item.child && item.child.con && cl != 0">
								<div v-if="item.child.con == 1">
									<div class="box_line clflex">
										<div class="box" v-for="(l, il) in item.child.lon" :key="il">
											{{item.child.value[il]}}
										</div>
									</div>
								</div>
								<div v-else>
									<div class="box_line" :class="'height'+(item.child?(item.con+item.child.con-1):item.con)" v-for="(kc, clc) in item.child.con" :key="clc">
										<div v-if="item.child.child && item.child.child.con == 1">
											<div class="box_line clflex">
												<div class="box" :class="item.child.child.lon > 1?'rightLine':''" v-for="(l2, il2) in item.child.child.lon" :key="il2">
													{{item.child.child.value[il2]}}
												</div>
											</div>
										</div>
										<div v-else>
											<div class="box" :class="item.child.child.lon > 1?'rightLine':''" v-for="(lc, ilc) in item.child.child.lon" :key="ilc">
												{{item.child.value[ilc]}}
											</div>
										</div>
									</div>	
								</div>
							</div>
							<div v-else>
								<div class="box" v-for="(l, il) in item.lon" :class="item.child.lon > 1?'rightLine':''" :key="il">
									{{item.value[il]}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<style lang="less">
	.flexCenterBox{
		display: flex;
		justify-content: left;
		align-items: center;
		text-align: center;
	}
	.height1 {
		height: 120px;
	}
	.height2 {
		height: 60px;
	}
	.height2:nth-child(1) {
		border-bottom: 1px solid #f5f5f5;
	}
	.height3 .box{
		height: 40px;
	}
	.height3 {
		border-bottom: 1px solid #f5f5f5;
	}
	// 多行宽度设置
	.loflex {
		width: 100px;
	}
	.loflex.height3 .box{
		border-bottom: 1px solid #f5f5f5;
	}
	.loflex.height3 .box:last-child{
		border-bottom: none;
	}
	.height3:last-child {
		border-bottom: none;
	}
	.height4 {
		height: 30px;
		border-bottom: 1px solid #f5f5f5;
	}
	.height4:last-child {
		border-bottom: none;
	}
	// 多列 设置单元格宽度
	.rightLine {
		border-right: 1px solid #f5f5f5;
		width: 60px !important;
	}
	.clflex .rightLine:last-child{
		border-right: none;
	}
	.content .table .head .line:last-child {
		border-right: none;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.table {
			display: flex;
			justify-content: left;
			align-items: center;
			text-align: center;
			
			.head {
				width: 100%;
				border: 1px solid #f5f5f5;
				.line {
					min-width: 100px;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					border-right: 1px solid #f5f5f5;
					.loflex {
						flex-direction: column;
					}
					.box_line {
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						.box {
							text-align: center;
							font-size: 14px;
							color: #333;
							display: flex;
						    justify-content: center;
						    align-items: center;
							width: 100%;
						}
					}
				}
			}
		}
	}

	
</style>

<script>
	export default {
		data() {
			return {
				param: [
					{
						con: 1,
						lon: 1,
						value: ["测试单元格1"]
					},
					{
						con: 1,
						lon: 1,
						value: ["测试单元格2"]
					},
					{
						con: 1,
						lon: 1,
						value: ["测试单元格3"]
					},
					{
						con: 1,
						lon: 3,
						value: ["测试单元格4","隔壁","介绍"]
					},
					{
						con: 2,
						lon: 1,
						value: ["end"],
						child: {
							con: 2,
							lon: 1,
							value : ["多行"],
							child : {
								con: 1,
								lon: 2,
								value: ["多列1","多列2"]
							}
						}
					},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>