vue 遍历数据生成table?

后台数据如下:

//银行列表
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"}
]

预期视图:

clipboard.png

代码:

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

主要问题:注释的地方该如何遍历,才能将第三个数组的数据填充到对应的单元格里面?

阅读 5k
2 个回答
<th v-for="pro in ffcodeDto(agent.agent_code)">{{pro}}</th>
ffcodeDto: function(agent_code) {
      return this.bankDto.map(val => {
        const res = this.manageProDto.find(m => val.bankCode == m.zhcode && agent_code == m.ffcode)
        return res ? res.process : ''
      })
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题