Element-plus使用记录

Element-plus使用中遇到的问题与解决方案

动态渲染icon

Element-plus中的icon需要单独安装
Icon 图标 | Element Plus

<template>
  <div class="page">
    <div class="h-menu">
      <div class="show-menu" @click="isCollapseHandle">
        <el-icon v-if="isCollapse"><Expand />el-icon>
        <el-icon v-else><Fold />el-icon>
      div>
      <el-menu default-active="1" :collapse="isCollapse" :router="true">
        <el-menu-item v-for="item in menuList" :key="item.id" :index="item.path">
          <el-icon>
            <component :is="item.icon">component>
          el-icon>
          <template #title>{{ item.name }}template>
        el-menu-item>
      el-menu>
    div>
 
    <main>
      <RouterView />
    main>
  div>
template>
 
<script>
export default {
  data() {
    return {
      isCollapse: true,
      menuList: [
        {
          id: '1',
          name: 'menu-1',
          path: '/',
          icon: 'Files'
        },
        {
          id: '2',
          name: 'menu-2',
          path: 'test_path',
          icon: 'User'
        },
        {
          id: '3',
          name: 'menu-3',
          path: 'test_path',
          icon: 'SwitchButton'
        }
      ]
    }
  }
}
script>
 
<style lang="less" scoped>style>