注意:head的数量与table-td中的数量一致,且字段顺序不能变,且width对应,且parent的width是子列宽度之和
<scroll-view :scroll-x="true">
<view class="t-table">
<view class="t-head">
<view class="table-tr">
<view
v-for="(item, index) in tableConfig.head"
:key="index"
class="table-th"
:style="{padding: !!item.parent ? '0' : '', width: item.width || item.parent.width}"
>
<template v-if="!item.parent">{{item.name}}</template>
<template v-else>
<view>{{item.parent.name}}</view>
<view
v-for="(item2, index2) in item.child"
:key="index2"
class="table-th"
:style="{width: item2.width}"
>{{item2.name}}</view>
</template>
</view>
</view>
</view>
<view class="t-body">
<view
v-for="(item, index) in tableData"
:key="index"
class="table-tr"
:style="{backgroundColor: item.sort === '合计' ? '#FDF2F2' : item.isSum == '1' ? '#F4F9FF' : ''}"
>
<view class="table-td" style="width: 100px; color: rgba(0,0,0,0.5); fontSize: 14px">{{item.sort}}</view>
<!-- <view class="table-td" style="width: 100px; color: rgba(0,0,0,0.5); fontSize: 14px">{{index + 1}}</view> -->
<view class="table-td" style="width: 120px">{{item.a}}</view>
<view class="table-td" style="width: 120px">{{item.a}}</view>
<view class="table-td" style="width: 120px">{{item.a}}</view>
<view class="table-td" style="padding: 0">
<view class="table-td" style="width: 120px">{{item['合并列'].a}}</view>
<view class="table-td" style="width: 120px">{{item['合并列'].b}}</view>
</view>
<view class="table-td" style="padding: 0">
<view class="table-td" style="width: 130px">{{item.aa}}</view>
<view class="table-td" style="width: 120px">{{item.bb}}</view>
</view>
</view>
</view>
</view>
tableConfig: {
head: [
{name: '序号', width: '100px'},
{name: '时间', width: '120px'},
{name: '名称', width: '120px'},
{name: '地区', width: '120px'},
{parent: {name: '合并列的title', width: '240px'},
child: [{name: '子列1', width: '120px'},{name: '子列2', width: '120px'}]},
{parent: {name: '合并列的title', width: '250px'}, child: [{name: '子列1', width: '130px'},{name: '子列2', width: '120px'},]},
]
},
scroll-view {
white-space: nowrap;
height: auto;
}
.t-table {
display: table;
width: 100%;
border-collapse: collapse;
// overflow-x: auto;
margin-top: 20px;
table-layout: fixed;
box-sizing: border-box;
}
.t-head {
display: table-header-group;
font-size: 24px;
color: rgba(0,0,0,0.5000);
background-color: #F4F9FF;
box-sizing: border-box;
}
.t-body {
display: table-row-group;
box-sizing: border-box;
}
.table-tr {
display: table-row;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
box-sizing: border-box;
}
.table-th, .table-td {
display: table-cell;
min-width: 200px;
font-size: 32px;
padding: 20px;
border: 1px solid #eee;
text-align: center;
vertical-align: middle;
box-sizing: border-box;
}
.table-th {
font-weight: 600;
}
.table-td {
font-weight: 500;
white-space: pre-wrap;
line-height: normal;
.table-td {
border: none;
}
}