vue合并行操作？

Question

要实现的效果图如截图：

拿到的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": "手机"}]
    },
    ...
    ]

结果成了如下的样子：

代码如下：

<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**

Answer 1

      <div id="left_div2">
          <table cellSpacing=0 cellPadding=0 id="left_table2" class="table table-bordered">
              <template v-for="agent in chnl">
                  <tr>
                      <td :rowspan="agent.chnllist.length" ><p>{{agent.agentName}}</p></td>
                      <td><p>{{agent.chnllist[0].chnlname}}</p></td>
                  </tr>
                  <tr v-for="(chnel,index) in agent.chnllist" v-if="index > 0">
                      <td><p>{{chnel.chnlname}}</p></td>
                  </tr>
              </template>
          </table>
      </div>

Answer 2

<div id="left_div2">
    <table cellSpacing=0 cellPadding=0 id="left_table2" class="table table-bordered">
        <template v-for="(agent,index) in chnl">
            <tr>
                <td :rowspan="agent.chnllist.length">
                  <p>{{ agent.agentName }}</p>
                </td>
                <td>
                  <p>{{ agent.chnllist[0].chnlname }}</p>
                </td>
            </tr>
            <tr v-for="(chnel,idx) in agent.chnllist" v-if="idx > 0">
                <td>
                  <p>{{ chnel.chnlname }}</p>
                </td>
            </tr>
          </template>
    </table>
</div>

Answer 3

// chnllist 是 tr
<template v-for="agent in chnl">
    <tr v-for="chnel in agent.chnllist">
        <td :rowspan="agent.chnllist.length"><p>{{agent.agentName}}</p></td>
        <td><p>{{chnel.chnlname}}</p></td>
    </tr>
</template>