vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

原创

已于 2022-03-14 11:05:30 修改 · 置顶 · 4.2k 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

于 2021-04-17 23:19:43 首次发布

早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一下心路历程

一、概念

递归：递归其实说白了，就是自己调用自己，样子就像是套娃一个套一个的，小时候玩过一个游戏汉诺塔就是利用的递归原理：
在这里插入图片描述
函数递归：函数利用函数名还调用自己
组件递归：所以组件递归利用的是vue组件中的name属性来实现的

二、需求

实现可折叠动态渲染多级侧边栏导航

三、分析

在这里插入图片描述

1、观察到侧边栏导航是一级一级的，第二级就相当于再重复一遍第一级

2、有一个特点，有的菜单有下级，有的没有下一级

3、动态渲染，说明是从后台接口获取的树类型数据，动态的渲染上去

四、代码实现

1、首先先执行一下文档里的demo试一下：

文档：element文档

2、改成自己需要的样式，第一次是这么写的

父组件SideBar

<template>
  <el-menu class="menu-wrap" :default-active="menuActiveName || 'home'" :active="menuActiveName || 'home'"
           :collapse="sidebarFold" :collapseTransition="false" :unique-opened="true" @select="selectItem">
    <template>
      <el-menu-item @click="sidebarFold = !sidebarFold">
        <i v-show="!sidebarFold" class="el-icon-s-fold"></i>
        <i v-show="sidebarFold" class="el-icon-s-unfold"></i>
        <span slot="title" class="sidebar-one">导航列表</span>
      </el-menu-item>
    </template>
<!--    <side-bar-item :list="menuList"></side-bar-item>-->
    <template v-for="(item,index) in menuList" class="menu">
      <!-- 标题 -->
      <template v-if="item.children.length" >
        <el-submenu :key="index" :index="item.id" class="sub-menu-item">
          <template :index="item.index" slot="title">
            <!--            <i :class="item.icon"></i>-->
            <i class="iconfont icon-danganjianying"></i>
            <span>{
  
  {item.name}}</span>
          </template>
          <el-menu-item-group class="menu-item-group">
            <side-bar-item :list="item.children"></side-bar-item>
          </el-menu-item-group>
        </el-submenu>
      </template>
      <!-- 选项 -->
      <template v-else>
        <el-menu-item :key="index" :index="item.id" class="menu-item">
          <!--          <i :class="item.icon"></i>-->
          <i class="iconfont icon-danganjianying"></i>
          <span>{
  
  {item.name}}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>

export default {
    
    
  name: 'SideBar',
  components: {
    
    
    SideBarItem: () => import('@/components/common/SideBarItem')
  },
  data () {
    
    
    return {
    
    

    }
  },
  mounted () {
    
    
  },
  methods: {
    
    
    selectItem(name, path){
    
    
      // alert(name)
      this.$router.push(path)
      this.$store.commit('common/updateMenuActiveName', name)
    }
  },
  computed: {
    
    
    menuList: {
    
    
      get () {
    
    
        return this.$store.state.common.menuList
      },
      set (val) {
    
    
        this.$store.commit('common/updateMenuList', val)
      }
    },
    menuActiveName: {
    
    
      get () {
    
     return this.$store.state.common.menuActiveName },
      set (val) {
    
     this.$store.commit('common/updateMenuActiveName', val) }