Vue concurrent operation?

the screenshot of the effect to be achieved is as follows:

json:

the code is as follows:

<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">{{agent.agentName}}</td>
            <!--<td >{{agent.agentName}}</td>-->
            <td v-for="chnel in agent.chnllist">{{chnel.chnlname}}</td>
        </tr>
    </table>
</div>

* * data relationship: the bank contains a list of channels. The height of the bank merges the corresponding rows according to the length of the list
question: how to deal with the above json to achieve the desired results? I hope you will give me some comments on o ((*

Html5 css vue.js

Dec.02,2021

      <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" >{{agent.agentName}}</td>
                      <td>{{agent.chnllist[0].chnlname}}</td>
                  </tr>
                  <tr v-for="(chnel,index) in agent.chnllist" v-if="index > 0">
                      <td>{{chnel.chnlname}}</td>
                  </tr>
              </template>
          </table>
      </div>

<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">
                  {{ agent.agentName }}
                </td>
                <td>
                  {{ agent.chnllist[0].chnlname }}
                </td>
            </tr>
            <tr v-for="(chnel,idx) in agent.chnllist" v-if="idx > 0">
                <td>
                  {{ chnel.chnlname }}
                </td>
            </tr>
          </template>
    </table>
</div>

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

Previous: The new version of Viewer has modified the relationship in the buttons, how can roaming and cutting exist at the same time?

Next: Js add a div with subordinate tags

Mobile terminal layout, the mobile phone input method will top up the footer.
as the title the picture is as follows: how should this be solved? Vue-cli-based projects ...

Html5 css vue.js

Mar.05,2021
Use-webkit-line-clamp: 2 after vue packages the project; this property does not take effect?
-webkit-box-orient: vertical; autoprefixer:on -webkit-line-clamp: 2; text-overflow: ellipsis; after packaging with vue, the style of multi-line omission does not take effect? ...

Html5 css vue.js

Mar.20,2021
After Android Wechat hangs the official account to pay the pop-up window, the page will be stuck if the payment succeeds or fails.
problem description Front-end frame vue, I don t know if there is a problem with this. There is a payment place in the official account. Hang up the payment pop-up window. At this time, whether it is closing the pop-up window or entering the password...

Javascript html5 css vue.js Wechat-official-account

May.13,2022