uniappFlex实现table布局有⼀个flex布局的table插件 但数据是⼀列⼀列渲染的 修改了下 变成⼀⾏⼀⾏渲染了
<view class="advance-area">
<view class="flex-box thead">
<view class="item item-1">订单编号</view>
<view class="item item-2">下级⽤户</view>
<view class="item item-3">下单时间</view>
<view class="item item-4">订单状态</view>
</view>
<view class="flex-box tbody">
<view class="table-tr-no"v-if="tableList.length == 0">
暂⽆数据
</view>
<view class="table-tr"v-for="item in tableList":key="item.id">
<view class="item item-1">{{ derSn }}</view>
<view class="item item-2">{{ berName }}</view>
<view class="item item-3">{{ ateTime }}</view>
<view class="item item-4">{{ derStatus }}</view>
</view>
</view>
</view>
.advance-area{
.item{
font-size: 26upx;
border: 1upx solid #e0e0e0;
border-width: 1upx 1upx 1upx 0;
box-sizing: border-box;
text-align: center;
padding: 10upx 0;
display: flex;
justify-content: center;
align-items: center;
}
.thead{
.
item{
font-weight: bold;
padding: 16upx 0;
}
}
.tbody{
max-height: 500upx;
overflow-y: scroll;
.table-tr{
width: 100%;
display: flex;
font-size: 24upx;
}
.table-tr-no{
width: 100%;
text-align: center;
padding-top: 20upx;
}
}
.flex-box{html的flex布局
display: flex;
flex-wrap: wrap;
/
* item-1 item-2 item-3 item-4 的宽度根据需要⾃⼰定 */ .item-1{
flex: 40%;
}
.item-2{
flex: 24%;
}
.item-3{
flex: 18%;
}
.item-4{
flex: 18%;
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。