直接贴代码

list数据:

const list = reactive([
  {
    path: "/user",
    name: "user",
    label: "用户管理",
    icon: "user",
    url: "UserManage/UserManage"
  },
  {
    label: "其他",
    icon: "location",
    path: "/other",
    children: [
      {
        path: "/page1",
        name: "page1",
        label: "页面1",
        icon: "setting",
        url: "Other/PageOne"
      },
      {
        path: "/page2",
        name: "page2",
        label: "页面2",
        icon: "setting",
        url: "Other/PageTwo"
      }
    ]
  }
])

动态引入icon图标: el-icon包裹(不包裹的话图标会很大,需要设置样式),用动态组件的方式引入图标

 <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path">
    <el-icon>
      <component class="icons" :is="item.icon"></component>
    </el-icon>
    <span>{{ item.label }}</span>
 </el-menu-item>

Logo

前往低代码交流专区

更多推荐