本次业务是显示订单列表,订单列表在遍历的过程时,其中图片字段有多张图片需要同时展现,并且多张图片通过字符串拼接在一起,需要进行split分割。
这是查询出的字符串,多张图片通过 &符号拼接起来,在使用时只需要对&进行分割就能得到一个数组,里面包含了你想要分割的数据
当把请求得到的数据赋值给shuju[]后,可以开始循环
其中需要注意的是shuju[index].pic 必须要带上索引才能拿到这个字段的值
分割也可以直接进行分割,注意不能直接用img标签 要在外面嵌套一层div
<tbody id="mytable">
<tr v-for="(item,index) in shuju">
<td>@{{ item.Id }}</td>
<td>@{{ item.productid }}</td>
<td>@{{ item.money }}</td>
<td v-if="item.status==0">结算中</td>
<td v-if="item.status==1">待付款</td>
<td v-if="item.status==2">处理中</td>
<td v-if="item.status==3">配送中</td>
<td v-if="item.status==4">已送达</td>
<td>@{{ item.time }}</td>
<td>@{{ item.userid }}</td>
<td>@{{ item.address }}</td>
<td>@{{ item.tel }}</td>
<td>@{{ item.name }}</td>
<td v-if="shuju[index].pic==null">
待上传
</td>
<td v-else>
<div v-for="i in shuju[index].pic.split('&')"><img v-bind:src="i" /></div></td>
{{-- <td v-else>待上传</td>--}}
<td v-if="item.videoSrc==null">待上传</td>
<td v-else><video v-bind:src="item.videoSrc" style="background-color: rgb(0, 0, 0); width: 500px; height: 100%; display: block;" webkit-playsinline="" x-webkit-airplay="" preload="auto" data-role="txp_video_tag" controls="controls" ></video></td>
<td>@{{ item.code }}</td>
<td>@{{ item.openid }}</td>
<td>
<div class="layui-table-cell laytable-cell-1-0-10">
<a class="layui-btn layui-btn-normal layui-btn-xs" @click="edit(item)">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs delete" id="del" @click="del(item.Id)">删除</a>
</div>
</td>
</tr>
</tbody>