vue双重循环绑定同一数组里的不同数据循环二维数组循环

最新推荐文章于 2022-07-02 11:03:39 发布

重生三次

最新推荐文章于 2022-07-02 11:03:39 发布

阅读量2.5k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_37034181/article/details/107449599

版权

本次业务是显示订单列表，订单列表在遍历的过程时，其中图片字段有多张图片需要同时展现，并且多张图片通过字符串拼接在一起，需要进行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>