技术文摘
Vue3 Element-plus 中 el-menu 无限级菜单组件的封装方法
在Vue3与Element-plus的项目开发中,无限级菜单的实现是一个常见需求,而封装el-menu无限级菜单组件能有效提升代码的复用性与可维护性。下面将详细介绍其封装方法。
创建一个新的Vue组件,例如命名为 InfiniteMenu.vue。在组件的模板部分,使用 el-menu 作为基础容器。el-menu 提供了丰富的样式与交互功能,我们可以根据项目需求进行定制。
<template>
<el-menu :default-active="activeIndex" class="infinite-menu" @select="handleSelect">
<template v-for="(menuItem, index) in menuList" :key="index">
<template v-if="menuItem.children && menuItem.children.length > 0">
<el-sub-menu :index="menuItem.id + ''">
<template #title>
<span>{{ menuItem.name }}</span>
</template>
<InfiniteMenu :menuList="menuItem.children"></InfiniteMenu>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="menuItem.id + ''">
<span>{{ menuItem.name }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</template>
在上述代码中,通过 v-for 遍历菜单数据 menuList。如果菜单项有子菜单,就使用 el-sub-menu 组件,并递归调用自身 InfiniteMenu 组件来展示子菜单;如果没有子菜单,则直接使用 el-menu-item 展示。
接着,在组件的脚本部分定义数据与方法。
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'InfiniteMenu',
props: {
menuList: {
type: Array,
default: () => []
}
},
setup() {
const activeIndex = ref('');
const handleSelect = (index) => {
activeIndex.value = index;
// 可以在这里添加点击菜单后的业务逻辑,例如路由跳转等
};
return {
activeIndex,
handleSelect
};
}
});
在这段代码中,通过 props 接收菜单数据 menuList,并在 setup 函数中定义了当前激活菜单项的索引 activeIndex 以及菜单点击事件处理函数 handleSelect。
最后,在需要使用无限级菜单的组件中引入并使用 InfiniteMenu.vue 组件。
<template>
<div>
<InfiniteMenu :menuList="menuData"></InfiniteMenu>
</div>
</template>
<script setup>
import InfiniteMenu from './InfiniteMenu.vue';
import { ref } from 'vue';
const menuData = ref([
{ id: 1, name: '菜单1', children: [] },
{ id: 2, name: '菜单2', children: [
{ id: 21, name: '子菜单2.1', children: [] },
{ id: 22, name: '子菜单2.2', children: [] }
] }
]);
</script>
通过以上步骤,我们成功在Vue3 Element-plus 中封装了el-menu无限级菜单组件,能够轻松满足复杂菜单展示的需求,提升开发效率。
TAGS: Vue3 Element-Plus el-menu 无限级菜单组件封装
- MySQL主从数据库同步延迟问题的解决办法
- 如何在mysql中导入txt数据
- 在Linux系统中怎样查看MySQL是否已启动
- MySQL Workbench 使用方法
- SQL 中 group by 和 having 用法总结
- SQL Server分页查询处理方法讲解
- 聊聊SQL查询中字段被包含语句的问题
- SQL注入简单实例
- MySQL tar 包移动、解压与创建 mysql 用户
- 深入解析MySQL数据库的source命令
- SQL Server常用函数使用方法总结
- SQL Server执行相关动态SQL的正确方式讲解
- Visual Studio 操作 MySQL 全流程步骤
- Sql Server临时表与游标实例用法介绍
- 如何使用 Navicat for MySQL 更改 MYSQL 数据表字体大小