没有做处理的效果:
数组:
attendeeSignFormVOList: [
{ name: "自定义名称1", data: "自定义数据1" },
{ name: "自定义名称2", data: "自定义数据2" },
{ name: "自定义名称3", data: "自定义数据3" },
],
html:
<!-- :class="
attendeeSignFormVOList.length % 2 != 0 &&
index == attendeeSignFormVOList.length - 1
? 'ticket-custom-item-content-max'
: ''
"添加此代码判断数组数量为奇数行且为最后一个子项时添加 ticket-custom-item-content-max类名将宽度设置为100%-->
<!-- 自定义项 -->
<div class="ticket-custom-item">
<div class="flex-row-wrap">
<div
class="ticket-custom-item-content flex-start"
v-for="(item, index) in attendeeSignFormVOList"
:key="index"
:class="attendeeSignFormVOList.length%2!=0&&index==attendeeSignFormVOList.length-1?'ticket-custom-item-content-max':''"
>
<div class="order-details-name">{{ item.name }}</div>
<div class="order-details-content">{{ item.data }}</div>
</div>
</div>
</div>
css:
.ticket-custom-item {
width: 100%;
background: #f7f9fc;
}
.ticket-custom-item {
border-top: 0.04rem solid rgba(242, 243, 247, 1);
margin-top: 0.2rem;
padding: 0.2rem 0 0 0;
}
.ticket-custom-item-content {
width: 50%;
padding: 0.13rem 0;
background: #ffffff;
margin-bottom: 0.14rem;
}
.ticket-custom-item-content-max {
width: 100% !important;
}
效果图: