How do vue table rows and columns correspond to the contents of the table?

the format of the data transmitted in the background is as follows:

//
bankDto: [
    0: {bankName: "", bankCode: "20000001", sName: ""}
    1: {bankName: "", bankCode: "20000007", sName: ""}
    2: {bankName: "", bankCode: "20000002", sName: ""}
]
//
manageFDto: [
    0: {agent_code: "8611", agent_name: ""}
    1: {agent_code: "8612", agent_name: ""}
    2: {agent_code: "8613", agent_name: ""}
    3: {agent_code: "8615", agent_name: ""}
    4: {agent_code: "8623", agent_name: ""}
    5: {agent_code: "8631", agent_name: ""}
    6: {agent_code: "8632", agent_name: ""}
    7: {agent_code: "8633", agent_name: ""}
    8: {agent_code: "8634", agent_name: ""}
    9: {agent_code: "8636", agent_name: ""}
]
//
manageProDto: [
    0: {zhcode: "20000001", process: "", ffcode: "8623"}
    1: {zhcode: "20000007", process: "", ffcode: "8623"}
    2: {zhcode: "20000002", process: "", ffcode: "8623"}
]

View:

clipboard.png

Code:

<!---->
<div id="left_div2">
    <table cellSpacing=0 cellPadding=0 id="left_table2" class="table table-bordered">
        <tr v-for="agent in manageFDto">
            <th >

{{agent.agent_name}}

</th> </tr> </table> </div> <!----> <div id="right_div1"> <div id="right_divx"> <table cellSpacing=0 cellPadding=0 id="right_table1" class="table table-bordered"> <tr> <th v-for="bank in bankDto">

{{bank.sName}}

</th> </tr> </table> </div> </div> <!----> <div id="right_div2"> <div id="right_div2x"> <table cellSpacing=0 cellPadding=0 id="right_table2" class="table table-bordered"> <tr v-for="item in manageProDto"> <td>

{{}}

</td> </tr> </table> </div> </div>

problem description:

~~~~~~o()o

Sep.27,2021
Menu