效果图
实现步骤
页面中标签写法
代码语言：javascript复制<van-cell-group title="当天数据列表">
<view class='history-table-wrap'>
<view class="trHead">
<view class="th th1">订单</view>
<view class="th th2">线体</view>
<view class="th th3">工序</view>
<view class="th th4">件数</view>
<view class="th th5">时间</view>
<view class="th th6">状态</view>
</view>
<view class="table">
<block wx:for="{{dataArray}}" wx:key="key">
<view class="tr_refuse" wx:if="{{item.status == '2'}}">
<!-- <view class="td td1"style="width: 124rpx; height: 98rpx; display: block; box-sizing: border-box; left: NaNrpx; top: NaNrpx">{{item.ordername}}</view> -->
<view class="td td1">{{item.ordername}}</view>
<view class="td td2">{{item.linename}}</view>
<view class="td td3">{{item.procedurename}}</view>
<view class="td td4">{{item.number}}</view>
<view class="td td5">{{item.time}}</view>
<view class="td td6">{{item.status == '0'?'已签核':(item.status == '1'?'待签核':'已拒绝')}}</view>
</view>
<view class="tr" wx:if="{{item.status != '2'}}">
<view class="td td1">{{item.ordername}}</view>
<view class="td td2">{{item.linename}}</view>
<view class="td td3">{{item.procedurename}}</view>
<view class="td td4">{{item.number}}</view>
<view class="td td5">{{item.time}}</view>
<view class="td td6">{{item.status == '0'?'已签核':item.status == '1'?'待签核':item.status == '3'?'作废确认':'已作废'}}</view>
</view>
</block>
</view>
</view>
</van-cell-group>wxss中样式文件
代码语言：javascript复制 .select{
box-sizing: border-box;
width: 100%;
height: 70rpx;
border:1px solid #282828;
border-radius: 8rpx;
display: flex;
align-items: center;
padding: 0 20rpx;
}
.select_text{
font-size: 30rpx;
flex: 1;
}
.select_img{
width: 40rpx;
height: 40rpx;
display: block;
transition:transform 0.3s;
}
.select_img_rotate{
transform:rotate(180deg);
}
.option_box{
position: absolute;
top: 70rpx;
width: 100%;
border:1px solid #282828;
box-sizing: border-box;
height: 0;
overflow-y: auto;
border-top: 0;
background: #282828;
transition: height 0.3s;
}
.option{
display: block;
line-height: 40rpx;
font-size: 30rpx;
border-bottom: 1px solid #282828;
padding: 10rpx;
}
.picker{
background-color: #282828;
}
.stepper{
margin-top: -70rpx;
margin-left: 220rpx;
}
.t{
line-height: 44px;
font-size: 26rpx;
color:#767778;
margin-left: 30rpx;
text-align: center;
margin-top: 40rpx;
}
.unit{
background-color: #FFFFFF;
height: 80rpx;
}
.history-table-wrap{
position: absolute;
width: 100%;
height: calc(100vh - 800rpx);
left: 50%;
margin-left: -400rpx;
top: 7rpx;
overflow-y: scroll;
overflow-x: hidden;
}
/* 表格代码 */
.table{
margin-top: 70rpx;
border:1px solid #080808;
border-right:0;
border-bottom: 0;
width: 100%;
margin-left: 3%;
}
.trHead{
width:100%;
display: flex;
justify-content: space-between;
position:fixed;
left: 1rpx;
}
.tr{
margin-left: 3rpx;
width:100%;
display: flex;
justify-content: space-between;
}
.th{
padding: 10px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
width: 100%;
font-weight: 800;
background-color: #00B26B;
font-size: 28rpx;
color: #fff;
}
.td{
word-break:break-all;
padding: 5px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
width: 100%;
font-size: 20rpx;
color: #fff;
}
.tr_refuse{
margin-left: 3rpx;
width:100%;
display: flex;
justify-content: space-between;
background-color: rgb(248, 0, 0);
}
.value-class {
flex: none !important;
}
.title{
color: #585858;
font-size: 16px;
} 
