vue3侧边栏

最新推荐文章于 2024-08-02 23:42:04 发布

六加六呀

最新推荐文章于 2024-08-02 23:42:04 发布

阅读量874

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44761131/article/details/126465463

版权

第一次写的结构然后在进行改变

    <el-menu default-active="1" >
      <el-menu-item index="1">
        <el-icon><document /></el-icon>
        <span>菜单1</span>
      </el-menu-item>

      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span>菜单2</span>
      </el-menu-item>

      <el-menu-item index="3">
        <el-icon><document /></el-icon>
        <span>菜单3</span>
      </el-menu-item>
    <!-- 二级三级-->
      <el-sub-menu index="4">
        <template #title>
          <el-icon><setting /></el-icon>
          <span>菜单4</span>
        </template>
        <el-menu-item index="4-1">菜单四—1</el-menu-item>
        <el-menu-item index="4-2">菜单四—2</el-menu-item>
      </el-sub-menu>
    </el-menu>

第二次修改的侧边栏

 <el-menu default-active="1" >
      <div v-for="(item,index) in menu" :key="index">
      <!-- 一级-->
      <el-menu-item  v-if="item.Subclass.length == 0" :index="item.id">
       <!-- vue3中图标是以组件的形式引入 遍历的时候要用组件的形式遍历-->
        <el-icon><Component :is="item.icon"></Component></el-icon>
        <span>{{item.title}}</span>
      </el-menu-item>
        
      <!-- 二级三级-->
      <el-sub-menu  v-if="item.Subclass.length>0" :index="item.id" >
        <template #title>
          <el-icon><Component :is="item.icon"></Component></el-icon>
          <span>{{item.title}}</span>
        </template>
        <div v-for="(itemTwo,index) in item.Subclass " :key='index'>
        <el-menu-item :index="itemTwo.id">{{itemTwo.title}}</el-menu-item>
        </div>
      </el-sub-menu>
      </div>
    </el-menu>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {reactive,shallowRef} from "vue";
const Array = [
  {
    id:'1',
    icon:Document,
    title:'数据分析',
    router:'',
    Subclass:[]//是否有二级三级等等菜单
  },
  {
    id:'2',
    icon:IconMenu,
    title:'用户列表',
    router:'',
    Subclass:[]//是否有二级三级等等菜单
  },
  {
    id:'3',
    icon:Setting,
    title:'订单管理',
    router:'',
    Subclass:[]//是否有二级三级等等菜单
  },
  {
    id:'4',
    icon:Setting,
    title:'菜品管理',
    router:'',
    Subclass:[]//是否有二级三级等等菜单
  },
  {
    id:'5',
    icon:Location,
    title:'员工管理',
    router:'',
    Subclass:[
      {
        id:'5-1',
        title:'员工详情',
        router:'role',
      },
      {
        id:'5-2',
        title:'其他页面',
        router:'',
      }
    ]//是否有二级三级等等菜单
  }
]
const menu = shallowRef(Array)
</script>