vue 遍历渲染多维数据

需求：

页面布局如下所示：其中顶部tab不固定，由后端返回的数据决定，因此这里需要一次遍历。每个tab下面都有相同的模块，顶部tab的active是谁就显示谁的数据，这里的数据也是由后端返回，因此这里也需要一次遍历；最后每个数据里面包含多条信息，需要用ul>li显示出来。这里的li不固定，也需要一次遍历；因此分析本需求总共需要遍历三次。另外，每个数据需要显隐可控，切换时icon改变，且切换顶部tab后显隐的状态不变，即可做横向对比。

代码：

后端配置表数据如下所示：

月份	关注	推荐	推荐	电影	音乐	美食
1	。。。	。。。	。。。	。。。	。。。	。。。
2	。。	。。	。。	。。	。。	。。
3	。。。	。。。	。。。	。。。	。。。	。。。
4	。。。	。。。	。。。	。。。	。。。	。。。
5	。。。	。。。	。。。	。。。	。。。	。。。

接口返回的是一个数组，数组中包含各对象。

<view class="chict-pg">
        <view class="chict-pg-list" v-for="(item,index) in list1" :key="index">
            <view class="chict-pg-item" @click="change_itemState(index)" >
            <image class="chict-pg-icon" :src="item.icon" mode="aspectFill"></image>
            <view class="chict-pg-name">{{item.name}}</view>
            <image class="chict-pg-isdrop" :src="item.flag==true?item.drop:item.pull" mode="aspectFill"></image>
            <view class="chict-pg-ct" v-show="!item.flag">
                <ul class="chict-pg-ul">
                    <li v-for="(item2,index2) in list2[index]" :key="index2">{{item2}}</li>
                </ul>
            </view>
            </view>
        </view>
</view>

思路：

1、mounted钩子，获取接口数据并存入data中。

2、创建一维数组，将接口数据数组中的每个对象需要的value值转化为一维数组push至数组中去，生成一个二维数组。

3、data中存放icon地址，设置flag控制显隐，三元表达式决定icon使用，据外层item值决定是第几个数据。

4、内层的v-for根据外层index值遍历二维的数据，生成多个li,完成渲染。