<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>
