vue3的element-plus侧边菜单栏测试案例

未正确集成element-plus的先看前面的随笔集成后没问题  ，下面案例才能正常运行展示


<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
let menuList=[
  {
    menuName: '标题一',
    type: '1',
    children: [{
      menuName: '标题一_1',
      type: '2',
      children: [{
        menuName: '标题一_1_1',
        type: '3',
      }],
    },{
      menuName: '标题一_2',
      type: '2',
    },{
      menuName: '标题一_3',
      type: '2',
    },
    ]
  },{
    menuName: '标题二',
    type: '1',
  },{
    menuName: '标题三',
    type: '1',
  }
]
</script>

<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu
          :router=true
          default-active="home"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
      >
        <template v-for="menu in menuList" >
          <el-sub-menu v-if="menu.children" :index="menu.menuName">
            <template #title>
              <el-icon><location /></el-icon>
              <span>{{menu.menuName}}</span>
            </template>
            <el-menu-item v-if="menu.children" v-for="menu_1 in menu.children"  :index="menu_1.menuName">
              <template #title>{{menu_1.menuName}}</template>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-if="!menu.children"  :index="menu.menuName">
            <el-icon><location /></el-icon>
            <template #title>{{menu.menuName}}</template>
          </el-menu-item>
        </template>

      </el-menu>
    </el-col>
  </el-row>
</template>