Vue3学习笔记——使用element.ui中的下拉菜单

最新推荐文章于 2024-05-16 02:53:35 发布

秃头小辣鸡

最新推荐文章于 2024-05-16 02:53:35 发布

阅读量215

点赞数

文章标签：学习笔记

本文链接：https://blog.csdn.net/qq_44636959/article/details/134435286

版权

在这里插入图片描述
先看画面
因为element.ui官方文档适用于Vue2，所以需要改变写法
实现代码

<template>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    </el-menu>
  </template>