在home.view中添加代碼

<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header class="common-header flex-float">
          <div class="flex">
            <img class="logo" src="../assets/logo.png" alt="" />
            <h1 class="title">商鋪后臺管理系統(tǒng)</h1>
          </div>

          <el-button type="danger">退出</el-button>
        </el-header>
        <el-container>
          <!-- 側(cè)邊欄 -->
          <el-aside class="common-aside" width="200px">
            <!-- 菜單 -->
            <el-menu background-color="none" text-color="#fff" :router="true">
              <testItem v-for="menu in menuList" :menu="menu" :key="menu.id" :index="menu.id+''"></testItem>
            </el-menu>
          </el-aside>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
let menuList = reactive([
  {
    authname: "隨便管理",
    id: 1,
    children: [

    ]
  },
  {
    authname: "用戶管理",
    id: 2,
    children: [
      {
        authname: "二級用戶1",
        id: 12,
        children: []
      },
      {
        authname: "二級用戶2",
        id: 13,
        children: [
          {
            id: 14,
            authname: "三級用戶1"
          }
        ]
      }
    ]
  },
  {
    authname: "訂單管理",
    id: 3,
    children: [
      {
        authname: "二級訂單1",
        id: 15,
        children: []
      },
      {
        authname: "二級訂單2",
        id: 16,
        children: [
          {
            id: 17,
            authname: "三級訂單1",
            children:[
              {
                id:18,
                authname:"四級",
                children:[
                 {
                  id:20,
                  authname:"五級",
                  children:[]
                 }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
])
</script>

<style >
.el-container {
  height: 100vh;
  overflow: hidden;
}

.common-header {
  background: rgb(63 67 72);
}

.common-aside {
  background: rgb(48, 55, 65);
}

.logo {
  width: 60px;
}

.title {
  color: #fff;
}
</style>

?2 創(chuàng)建一個全局組件

<template lang="">
         
        <el-menu-item :index="menu.id+''"  v-if="!menu.children || menu.children.length == 0" >
            <image src="../assets/logo.png" style="width:30px;height:30px;"/>
            <span>{{ menu.authname }}</span>
        </el-menu-item>
        <el-sub-menu v-else >
                <template #title>
                    <image src="../assets/logo.png" style="width:30px;height:30px;"/>
                  <span>{{ menu.authname }}</span>
                </template>
               
                <!-- 二級菜單 -->
            <el-menu-item-group v-if=" menu.children&& menu.children.length>0">
                <testItem  v-for="item in menu.children" :key="item.id" :index="item.id+''" :menu="item"></testItem>
            </el-menu-item-group>
            <testItem v-else  v-for="item in menu.children" :key="item.id" :index="item.id+''" :menu="item"></testItem>
            
        </el-sub-menu>

    
</template>

<script>

export default {
    name: 'testItem',
    props: {
        menu: Object
    }
}
</script>


<style lang="">
    
</style>

?效果如圖

文章來源地址http://www.zghlxwxcb.cn/news/detail-699703.html

到了這里，關(guān)于Vue3后臺管理系統(tǒng)Element-plus_側(cè)邊欄制作_無限遞歸的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！