H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue合并行操作?

要实现的效果图如截图:
clipboard.png

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

结果成了如下的样子:

clipboard.png

代码如下:

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

回答:

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

回答:

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

回答:

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

本文地址:H5W3 » vue合并行操作?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址