Vue：对象数组多重循环

数据结构及对应展示效果图

 HTML结构：

<div class="depList f14 lh26 mt30 mb40">
  <dl v-for="(dep,depIndex) in depData" :key="depIndex">
    <dt v-if="depIndex == 'county'">市直政府部门</dt>
    <dt v-if="depIndex == 'hotWindow'">热点窗口</dt>
    <dt v-if="depIndex == 'financial'">金融行业</dt>
    <dt v-if="depIndex == 'urban'">县市区政府部门</dt>
    <dd v-for="(list,listIndex) in dep" :key="listIndex">
      <div v-if="typeof(listIndex) != 'number'">
        <span>{{listIndex}}</span>
        <p><b v-for="(items,index) in list" :key="index">{{items.departname}}</b></p>
      </div>
      <div v-else-if="list.Depart.length !=0">
        <span>{{list.areaname}}</span>
        <p><b v-for="(items,index) in list.Depart" :key="index">{{items.departname}}</b></p>
      </div>
    </dd>
  </dl>
</div>

简单解释:

<!--总循环 abGroup多重循环一层  abData为总数据(对象/数组混合 a为对象 b为数组)-->
<div v-for="(abGroup,abGroupIndex) in abData" :key="abGroupIndex" >
  <!--左侧标题-->
  <div v-if="abGroupIndex == '对象'">对象数据(或根据约定)</div>
  <div v-if="abGroupIndex == '数组'">数组数据(或根据约定)</div>
  <!--右侧分类(ab对象/数组混合)多重循环二层-->
  <div  v-for="(ab,abIndex) in abGroup" :key="abIndex">
    <!--typeof(abIndex)通过下标判断是否为数字，区分数据是对象数据还是数组数据-->
    <div v-if="typeof(abIndex) != 'number'">
      <span>{{abIndex}}</span>
      <!--右侧子分类a对象数据 多重循环三层-->
      <p><b v-for="(a,aIndex) in ab" :key="aIndex">{{a.字段名}}</b></p>
    </div>
    <!---v-else-if="ab.字段名.length !=0"判断右侧分类是否有值，有值再循环，防止出现左侧有标题而右侧分类是空，如果右侧确定都有值可以直接用v-else -->
    <div v-else-if="ab.字段名.length !=0">
      <span>{{ab.字段名}}</span>
      <!--右侧子分类b数组数据 多重循环三层 下一层为b.字段名-->
      <p><b v-for="(b,bIndex) in ab.字段名" :key="bIndex">{{b.字段名}}</b></p>
    </div>
  </div>
</div>