325建筑网站,深圳网站建设 网络推广,网站 禁止ping,seo在线教程在 Vue 3 中使用 Element Plus 的 el-menu 组件时#xff0c;默认情况下菜单项是关闭状态的。如果你想让某个菜单项默认处于展开状态#xff0c;你可以通过设置菜单项的 default-active 属性来实现。
默认写法
步骤 1: 设置 default-active
你需要在 el-menuel-menu 组件时默认情况下菜单项是关闭状态的。如果你想让某个菜单项默认处于展开状态你可以通过设置菜单项的 default-active 属性来实现。
默认写法
步骤 1: 设置 default-active
你需要在 el-menu 组件上设置 default-active 属性并为其提供一个值该值应该是你希望默认激活的菜单项的索引或路径。
示例代码
假设你有一个简单的菜单结构其中包含一个子菜单你想让这个子菜单默认展开
templateel-menu :default-activeactiveIndex classel-menu-vertical-demoel-sub-menu index1template #titleel-iconlocation //el-iconspan导航一/span/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-itemel-menu-item index1-3选项3/el-menu-item/el-sub-menuel-menu-item index2el-icondocument //el-icontemplate #title导航二/template/el-menu-itemel-menu-item index3 disabledel-iconsetting //el-icontemplate #title导航三/template/el-menu-item/el-menu
/templatescript setup
import { ref } from vue;
import { Location, Document, Setting } from element-plus/icons-vue;const activeIndex ref(1-1); // 默认激活 1-1 菜单项
/script
说明
default-active 属性设置为 1-1表示默认激活 index1-1 的菜单项。el-sub-menu用于创建子菜单。el-menu-item用于创建菜单项。el-icon用于显示图标。template #title用于自定义菜单项的标题。
注意事项
如果你想让一个子菜单默认展开可以将 default-active 设置为该子菜单中的任意一个子菜单项的 index。如果你想让多个子菜单默认展开可以使用数组形式的 default-active 属性。
示例多个子菜单默认展开
如果你想让多个子菜单默认展开你可以将 default-active 设置为一个数组包含你希望默认激活的菜单项的索引。
templateel-menu :default-active[1-1, 2] classel-menu-vertical-demoel-sub-menu index1template #titleel-iconlocation //el-iconspan导航一/span/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-itemel-menu-item index1-3选项3/el-menu-item/el-sub-menuel-menu-item index2el-icondocument //el-icontemplate #title导航二/template/el-menu-itemel-menu-item index3 disabledel-iconsetting //el-icontemplate #title导航三/template/el-menu-item/el-menu
/templatescript setup
import { ref } from vue;
import { Location, Document, Setting } from element-plus/icons-vue;const activeIndex ref([1-1, 2]); // 默认激活 1-1 和 2 菜单项
/script
在这个例子中default-active 设置为 [1-1, 2]表示默认激活 index1-1 和 index2 的菜单项。这将使得 index1 的子菜单及其第一个子菜单项 index1-1 处于展开状态并且 index2 的菜单项也处于激活状态。
特殊写法
Menu 组件
templatetemplate v-for(item, index) in menuList :keyindex!-- 没有子路由 --template v-if!item.childrenel-menu-item v-if!item.meta.hidden :indexitem.path clickgoRouteel-iconcomponent :isitem.meta.icon/component/el-icontemplate #titlespan{{ item.meta.title }}/span/template/el-menu-item/template!-- 只有一个子路由 --template v-ifitem.children item.children.length 1el-menu-item v-if!item.children[0].meta.hidden :indexitem.children[0].path clickgoRouteel-iconcomponent :isitem.children[0].meta.icon/component/el-icontemplate #titlespan{{ item.children[0].meta.title }}/span/template/el-menu-item/template!-- 有多个子路由 --el-sub-menu v-ifitem.children item.children.length 1 :indexitem.pathtemplate #titleel-iconcomponent :isitem.meta.icon/component/el-iconspan{{ item.meta.title }}/span/templateMenu :menuListitem.children/Menu/el-sub-menu/template
/templatescript setup langts
import { useRouter } from vue-router
// 引入路由器
const $router useRouter()
// 获取父组件传递的数据
defineProps([menuList])
// 点击菜单的回调
const goRoute (vc: any) {// 路由跳转$router.push(vc.index)
}
/script
script langts
export default {name: Menu
}
/script
style scoped/style
菜单栏 组件
templatediv classlayout_container!-- 左侧菜单 --div classlayout_sliderLogo/Logo!-- 展示菜单 --!-- 滚动组件 --el-scrollbar classscrollbar!-- 菜单组件 --el-menu background-color#2e2e2e text-colorwhite active-text-coloryellowgreen :default-active$route.pathMenu :menuListuserStore.menuRoutes/Menu/el-menu/el-scrollbar/div!-- 顶部导航 --div classlayout_tabbar456/div!-- 内容展示区域 --div classlayout_mainMain/Main/div/div
/templatescript setup langts
// 引入左侧菜单logo子组件
import Logo from ./logo/index.vue
// 引入菜单组件
import Menu from ./menu/index.vue
// 右侧内容的展示区
import Main from ./main/index.vue
// 获取路由对象
import { useRoute } from vue-router;
// 获取用户相关的小仓库
import useUserStore from /store/modules/user;
let userStore useUserStore();// 获取路由对象
let $route useRoute();
/scriptstyle scoped langscss
.layout_container {width: 100%;height: 100vh;background-color: red;.layout_slider {width: $base-menu-width;height: 100vh;background-color: $base-menu-bg;.scrollbar {width: $base-menu-width;height: calc(100vh - $base-menu-logo-height);.el-menu {border-right: none;}}}.layout_tabbar {position: fixed;width: calc(100% - $base-menu-width);height: $base-tabbar-height;background-color: cyan;top: 0px;left: $base-menu-width;}.layout_main {position: fixed;width: calc(100% - $base-menu-width);height: calc(100% - $base-tabbar-height);background-color: yellow;top: $base-tabbar-height;left: $base-menu-width;padding: 20px;overflow: auto;}
}
/style
