微信小程序没有表格组件,这里使用flex来自定义,先上效果图
wxml:
<view class="row">
<text class="text text1">人员费用</text>
<view class="column2-wrap">
<view class="column2" wx:for="{{data}}" wx:key="{{index}}">
<block wx:if="{{item.arr.length == 1}}">
<view class="text2">
<text class="text">{{item.name}}{{item.count}}人</text>
</view>
<view class="column3-wrap">
<view class="column-average">
<view class="text3">
<text class="text">{{item.arr[0].name}}{{item.arr[0].count}}人</text>
</view>
<view class="text3">
<text class="text" wx:if="{{item.arr[0].min_price === item.arr[0].max_price}}">{{item.arr[0].min_price/10000}}</text>
<text class="text" wx:else>{{item.arr[0].min_price/10000}}~{{item.arr[0].max_price/10000}}</text>
</view>
<view class="text3">
<text class="text" wx:if="{{item.min_price === item.max_price}}">{{item.min_price/10000}}</text>
<text class="text" wx:else>{{item.min_price/10000}}~{{item.max_price/10000}}</text>
</view>
</view>
</view>
</block>
<block wx:elif="{{item.arr.length > 1}}">
<view class="text2 text-average">
<text class="text">{{item.name}}{{item.count}}人</text>
</view>
<view class="column3-wrap">
<view class="column3" wx:for="{{item.arr}}" wx:key="idx" wx:for-item="itemDetail">
<view class="column3-text">
<text class="text">{{itemDetail.name}}{{itemDetail.count}}人</text>
</view>
<view class="column3-text">
<text class="text" wx:if="{{itemDetail.min_price === itemDetail.max_price}}">{{itemDetail.min_price/10000}}</text>
<text class="text" wx:else>{{itemDetail.min_price/10000}}~{{itemDetail.max_price/10000}}</text>
</view>
</view>
</view>
<view class="text4">
<text class="text" wx:if="{{item.min_price === item.max_price}}">{{item.min_price/10000}}</text>
<text class="text" wx:else>{{item.min_price/10000}}~{{item.max_price/10000}}</text>
</view>
</block>
</view>
</view>
</view>
wxss:
.row {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #dcdfe6;
text-align: center;
position: relative;
overflow: hidden;
}
.column2-wrap, .column3-wrap {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.row::after, .column2-wrap::after, .column3-wrap::after, .column3-text::after,
.column-average .text3::after, .total-cont view::after {
content: "";
position: absolute;
top: -100%;
bottom: -100%;
right: 0;
}
.row::after, .column2-wrap::after, .column3-wrap::after, .column-average::after,
.total-cont view::after {
left: 0;
border-left: 1px solid #dcdfe6;
}
.column2-wrap {
flex: 3.4;
}
.table-wrap .text1 {
flex: 0.7;
}
.table-wrap .text2 {
flex: 0.78;
}
.table-wrap .text-average {
flex: 1.17;
}
.table-wrap .text3 {
display: flex;
flex: 1;
}
.column2, .column3, .column-average, .total-cont view {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
position: relative;
}
.column2, .column3 {
border-bottom: 1px solid #dcdfe6;
}
.column2:last-child, .column3:last-child {
border-bottom: none;
}
.column3-wrap {
flex: 2;
}
.column3-text {
flex: 1;
justify-content: center;
position: relative;
}
.column-average .text3 {
flex: 1;
justify-content: center;
position: relative;
}
.row::after, .column3-text::after, .column-average .text3::after {
border-right: 1px solid #dcdfe6;
}
.login-btn::after, .grade-box .btn-add::after,
.column-average .text3:last-child::after {
border: none;
}
.table-wrap .text4 {
flex: 1;
}
js:
data: {
data: [
{
name: "二级建造师",
count: 3,
min_price: 500,
max_price: 42000,
arr: [
{
name: "建筑工程",
count: 3,
min_price: "150",
max_price: "150"
}
]
},
{
name: "职称人员",
count: 6,
min_price: 5100,
max_price: 42000,
arr: [
{
name: "机械",
count: 3,
min_price: "150",
max_price: "150"
},
{
name: "机械",
count: 3,
min_price: "150",
max_price: "150"
},
{
name: "机械",
count: 3,
min_price: "150",
max_price: "150"
},
{
name: "机械",
count: 3,
min_price: "150",
max_price: "150"
},
...
]
},
...
]
}