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>