商品分类（四）-填充右侧分类数据-右侧二三级商标渲染——通过computed计算属性，处理二三级菜单数据& 短路运算-节省处理器运算时间 &有嵌套关系的遍历，key不能写同样的index，否则报错

右侧商标渲染——填充分类模板右侧数据-通过computed计算属性，处理二级和三级菜单数据 & 短路运算，节省处理器的运算时间 & 具有嵌套关系的遍历，:key不能写同样的index等命名，否则会报错

右侧内容布局右侧数据填充 <div class="right"> <!-- 右侧分类信息 --> <div :key='item.cat_id' v-for='item in rightData' class="brand-item"> <div class="brand-title"> {{item.cat_name}} </div> <div class="brand-list"> <div :key='i' v-for='(brand,i) in item.children' class="brand"> <img :src="brand.cat_icon"> <p>{{brand.cat_name}}</p> </div> </div> </div> </div>

实例

右侧二级菜单-分类和三级菜单条目

二级菜单数据1

二级菜单数据2

二级菜单数据3

二级菜单数据4-三级菜单条目

二级和三级菜单展示

通过computed计算属性，处理二级和三级菜单数据，根据左侧id拿到右侧第一项数据

短路运算，节省处理器的运算时间

代码

export default { data () { return { currentId: 1, cate: [] } }, computed: { // 如果data中的数据发生变化，那么计算属性会重新计算结果 // 计算属性会基于之前的计算结果进行缓存(如果计算属性依赖的data发生变化，那么计算属性就会重新计算) rightData: function () { // 从全部数据中获取当前一级分类对应的右侧数据 let data = this.cate.filter(item => { return item.cat_id === this.currentId }) // 数组中必须有数据，才能获取对应的子属性 let rlist = data.length > 0 && data[0].children return rlist } }, }

情况一：遍历二级菜单，不加:key

二级菜单遍历，显示效果

情况二：遍历二级菜单，加:key； 正常写法

二级菜单遍历，显示效果

三级菜单数据

情况一：三级菜单结构

三级菜单静态图

情况二：动态获取三级菜单数据

注意：key同为index索引会报错

具有嵌套关系的遍历，:key不能写同样的index等命名，否则会报错

三级菜单动态图

右侧二级和三级菜单-重点样式

.right { flex: 1; height: 100%; overflow: auto; .brand-item { .brand-title { text-align: center; line-height: 2; } .brand-list { display: flex; flex-wrap: wrap; .brand { width: 33.33%; padding: 20rpx; box-sizing: border-box; img { width: 100%; height: 100rpx; } p { line-height: 1.5; font-size: 14px; text-align: center; } } } } }

一、二、三级菜单完整动态结构

<div> <!-- 搜索栏 --> <search-bar></search-bar> <div class="content"> <!-- 左侧一级分类 --> <div class="left" @click='handleChange'> <div :data-id='item.cat_id' :key='item.cat_id' v-for='item in cate' :class="['menu-item', {active: currentId === item.cat_id}]"> {{item.cat_name}} </div> </div> <!-- 右侧二级和三级分类 --> <div class="right"> <div :key='item.cat_id' v-for='item in rightData' class="brand-item"> <!-- 二级分类的标题 --> <div class="brand-title">{{item.cat_name}}</div> <!-- 三级分类 --> <div class="brand-list"> <!-- 每一个三级品牌 --> <div :key='i' v-for='(brand, i) in item.children' class="brand"> <img :src="brand.cat_icon"> <p>{{brand.cat_name}}</p> </div> </div> </div> </div> </div> </div>