先上效果图
思路剖析
1.给第一层级添加字段showFlag,默认值都为0
2.在切换方法中传入第一和第二层级的index,将对应外层级的showFlag的值等于内层级的index
3.在视图中的内层循环动态设置class,该class的满足条件:内层index === 外层数组list[parentIndex].showFlag
上代码
<div class="system-item" v-for="(data,parentIndex) in dataDiskList">
<div class="system-text">数据盘</div>
<div class="item-box" @click="switchDataSize(index,parentIndex)" :class="{ 'item-box-active':index === dataDiskList[parentIndex].showFlag }" v-for="(item,index) in diskListData" :key="index">
{{item.size}}GB
</div>
</div>
switchDataSize(index,parentIndex){
this.dataDiskList[parentIndex].showFlag = index
}