background data are 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"}
]

expected view:

Code:

<table>
    <thead>
        <tr>
            <th></th>
            <th v-for="bank in bankDto">{{bank.sName}}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="agent in manageFDto">
            <td>{{agent.agent_name}}</td>
            <!--<td v-for="item in manageProDto">{{item.process}}</td>-->
        </tr>
    </tbody>
</table>

main question: how to traverse the comments so that the data from the third array can be filled into the corresponding cells?