2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

vue合并行操作?

html5作者:猿2048志愿者

要实现的效果图如截图:
clipboard.png

拿到的json类似如下代码:

chnl:[
    {
    "agentCode": "001",
    "agentName": " 工行", 
    "chnllist": [
        {"chnlcode": "1","chnlname": "柜面"},
        {"chnlcode": "2","chnlname": "网银"},
        {"chnlcode": "3","chnlname": "终端"},
        {"chnlcode": "4","chnlname": "手机"}]
    },
    {
    "agentCode": "002",
    "agentName": " 农行", 
    "chnllist": [
        {"chnlcode": "1","chnlname": "柜面"},
        {"chnlcode": "2","chnlname": "网银"},
        {"chnlcode": "3","chnlname": "终端"},
        {"chnlcode": "4","chnlname": "手机"}]
    },
    {"agentCode": "003",
    "agentName": " 中行", 
    "chnllist": [
        {"chnlcode": "1","chnlname": "柜面"},
        {"chnlcode": "2","chnlname": "网银"},
        {"chnlcode": "3","chnlname": "终端"},
        {"chnlcode": "4","chnlname": "手机"}]
    },
    ...
    ]

结果成了如下的样子:

clipboard.png

代码如下:

<div id="left_div2">
    <table cellSpacing=0 cellPadding=0 id="left_table2" class="table table-bordered">
        <tr v-for="agent in chnl">
            <td :rowspan="agent.chnllist.length"><p>{{agent.agentName}}</p></td>
            <!--<td ><p>{{agent.agentName}}</p></td>-->
            <td v-for="chnel in agent.chnllist"><p>{{chnel.chnlname}}</p></td>
        </tr>
    </table>
</div>

**数据关系:银行包含着渠道的列表,银行的高度根据列表的长度来合并对应的行
问题:该如何处理如上json才能达到预期的效果?希望各位给个意见o((⊙﹏⊙))o**

评论
点击刷新
评论
相关问题
×添加代码片段