商品分类（四）-填充右侧分类数据-右侧二三级商标渲染——通过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>