持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

1.什么是多层数据和多级菜单

1.1要理解什么是多级数据就要先知道什么是一级数据

• 举个例子,一个商城,有电子产品,医药保健,体育健身三个模块,存在数组中如下所示:

goods:[
{name:'电子产品',id:'1'},
{name:'医药保健',id:'2'},
{name:'体育健身',id:'3'},
]

• 但是每一个大的模块又分几个小的模块:
• 电子产品:手机,电脑
• 医药保健:维生素,钙片
• 体育健身:运动器材,运动服装
• 那么我们就要把这些二级数据也写入数据中,但是我们又不能让他们和一级模块同级,
• 所以我们给一级数据增加一个children数组:

goods:[
{name:'电子产品',id:'1',
children:[{name:'手机',id:'11'},{name:'电脑',id:'12'}]
},
{name:'医药保健',id:'2',
children:[{name:'维生素',id:'21'},{name:'钙片',id:'22'}]
},
{name:'体育健身',id:'3',
children:[{name:'运动器材',id:'31'},{name:'运动服装',id:'32'}]
}
]

1.2同样我们要理解多级菜单,先要看看一级菜单是怎样的

• 我们把上面的一级数据渲染为菜单如下

• 我们上文的二级数据渲染为二级菜单如下:

2.为什么要使用多层数据,和多级菜单

• 1.在日常生活中多级菜单十分常见,如:书籍的目录结构,餐厅的菜单等,
• 这样能让使用者更加方便迅速的找到自己需要的内容,
• 提升查找效率和使用体验.
• 多级菜单更有逻辑性
• 2.为什么要使用多级数据,如果我们把所有数据,包括一级的二级的数据全部设为同级,那么我们就无法分辨哪一个是一级菜单,哪一个是二级菜单
• 所以我们采用对象嵌套数组的方法在一级数据中包裹二级数据,

3.如何把多层数据渲染为多级菜单

本文使用技术栈:vue2.0,element-ui

3.1获取多层数据

此处选择自己谁的那个的数据,实际中我们一般是请求服务器的数据

  data() {
    return {
      goods: [
        {
          name: "电子产品",
          id: "1",
          children: [
            { name: "手机", id: "11" },
            { name: "电脑", id: "12" },
          ],
        },
        {
          name: "医药保健",
          id: "2",
          children: [
            { name: "维生素", id: "21" },
            { name: "钙片", id: "22" },
          ],
        },
        {
          name: "体育健身",
          id: "3",
          children: [
            { name: "运动器材", id: "31" },
            { name: "运动服装", id: "32" },
          ],
        },
      ],
    };
  },

3.2写html结构

注意

• 在template中使用v-for
• 在第二次嵌套使用v-for时元素变量名不能和遍历一级数据的元素变量名相同

<template>
  <el-menu
    unique-opened
    :default-active="'21'"
    class="el-menu-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="width:200px"
  >
    <template v-for="item in goods">
      <el-submenu :key="item.id" :index="item.id">
        <template slot="title">{{ item.name }}</template>
        <template v-for="ele in item.children">
          <el-menu-item :key="ele.id" :index="ele.id">
            {{ ele.name }}</el-menu-item
          >
        </template>
      </el-submenu>
    </template>
  </el-menu>
</template>

4.总结

思路:

• 1.获取数据
• 2.html渲染
  

难点:

• 多次使用template,要深度理解template只是一个模板便签,自身不渲染,
• 不能把key写在template便签上