Vue3动态引入Element-plus icon图标

直接贴代码

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"
      }
    ]
  }
])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

动态引入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>

1
2
3
4
5
6