原因:由于uni不支持直接table和table的colspan和rowspan属性,所以要用view来自定义table
思路:table里套table来实现行和列的合并
表头效果:
有数据效果:(红框是表头)
<view class="table">
<view class="table_tr">
<view class="table_th" v-for="(item,index) in datatitle" :key="index">
<!-- <view v-if="item.colspan==1">
{
{item.name}}
</view> -->
<view class="table" v-if="item.colspan==1">
<view class="table_tr">
{
{item.name}}
</view>
<view class="table_tr">
<view class="table_th">{
{item.information.cellValue}}</view>
</view>
</view>
<view class="table" v-if="item.colspan>1">
<view class="table_tr">
{
{item.name}}
</view>
<view class="table_tr">
<view class="table_th" v-for="(itemTwo,indexTwo) in item.child" :key="indexTwo">{
{itemTwo.name}}</view>
</view>
<view class="table_tr">
<view class="table_th" v-for="(itemTwo,indexTwo) in item.child" :key="indexTwo">{
{itemTwo.information.cellValue}}</view>
</view>
</view>
</view>
</view>
</view>
.table{
display: table-header-group;
}
.table_tr{
display: table-row;
}
.table_th{
display:table-cell;
white-space:nowrap;
vertical-align: middle;
text-align: center;
box-sizing: border-box;
/* padding: 10rpx; */
border: 1px solid #eee;
}
this.datatitle = [
{
child: [],
colspan:1,
information: {
cellValue: "225",
name: "序号"
},
name: "序号"
},
{
child: [],
colspan:1,
information: {
cellValue: "225",
name: "序号"
},
name: "序号"
},
{
child: [],
colspan:1,
information: {
cellValue: "225",
name: "序号"
},
name: "序号"
},
{
child: [{
colspan: 1,
information: {
cellValue: "考勤情况",
name: "考勤情况",
},
name: "加班(天)"
},{
colspan: 1,
information: {
cellValue: "考勤情况",
name: "考勤情况",
},
name: "加班(天)"
}],
colspan: 6,
name: "考勤情况"
},
{
child: [{
colspan: 1,
information: {
cellValue: "考勤情况",
name: "考勤情况",
},
name: "加班(天)"
},{
colspan: 1,
information: {
cellValue: "考勤情况",
name: "考勤情况",
},
name: "加班(天)"
}],
colspan: 6,
name: "考勤情况"
},
{
child: [],
colspan:1,
information: {
cellValue: "225",
name: "序号"
},
name: "序号"
}
]