Vue3 Element-plus el-menu无限级菜单组件封装

对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装

---

 

 一、定义数据

MenuData.ts

1. export default [
2. {
3. id: "1",
4. name: "第一级菜单",
5. level: '1',
6. child: [
7. {
8. id: "11",
9. name: "第二级菜单",
10. level: '1-1',
11. child: [
12. {
13. id: "111",
14. name: "第三级菜单",
15. level: '1-1-1',
16. child: [
17. {
18. id: "1111",
19. name: "第四级菜单",
20. level: '1-1-1-1',
21. child: [
22. {
23. id: "11111",
24. name: "第五级菜单",
25. level: '1-1-1-1-1',
26. child: []
27. }
28. ]
29. }
30. ]
31. }]
32. }
33. ]
34. },
35. {
36. id: "2",
37. name: "第一级同级菜单",
38. level: '2',
39. child: []
40. }
42. ]

二、封装组件 

封装思想：

 1.对本身组件进行循环使用，如果有子集使用本身组件 把child数据传给自己

 2.如果没有子集 使用 el-menu-item

以下代码对setup( )函数和setup语法糖分别做了实现 

setup语法糖

1. <template>
2. <el-menu
3. :default-active="defaultActive"
4. :unique-opened="true"
5. class="el-menu-vertical-demo"
6. >
7. <template v-for="item in menu">
9. <template v-if="item.child && item.child.length > 0">
10. <el-sub-menu
11. :key="item.id"
12. :index="item.level"
13. :disabled="item.meta?.disabled"
14. :popper-append-to-body="false"
15. >
16. <template #title>
17. <i :class="[item.meta?.icon]">i>
19. <span> {{ generateSpaces(item.level) }} span>
20. <span slot="title"> {{ item.name }}span>
21. template>
22. <MenuTree
23. :menu="item.child"
24. :defaultActive="defaultActive"
25. @clickItem="clickItemHandle"
26. />
27. el-sub-menu>
28. template>
30. <template v-else>
31. <el-menu-item
32. :key="item.id"
33. :index="item.level"
34. :disabled="item.meta?.disabled"
35. :popper-append-to-body="false"
36. @click="clickItemHandle(item)"
37. >
38. <i :class="[item.meta?.icon]">i>
40. <span> {{ generateSpaces(item.level) }} span>
41. <span slot="title">{{ item.name }}span>
42. el-menu-item>
43. template>
44. template>
45. el-menu>
46. template>
48. <script lang="ts" name="MenuTree" setup>
49. // 把下面代码变成setup语法糖的形式
50. import type { PropType } from "vue";
51. import type { MenuItem } from "@/types/lesson";
52. // type 为了方便写成这样 可以根据自己项目设定type
53. defineProps({
54. menu: {
55. type: Array as unknown as PropType,
56. required: true,
57. default: () => [],
58. },
59. defaultActive: {
60. type: String as unknown as PropType,
61. required: true,
62. default: [],
63. },
64. });
66. const emit = defineEmits(["update-active-path", "clickItem"]);
68. // 返回的空格字符串 用于显示菜单层级
69. const generateSpaces = (level: string) => {
70. let str = "";
71. level.split("") .filter((it) => it != "-") .forEach(() => {
72. str += "　";
73. });
74. return str;
75. };
77. // 点击当前菜单项
78. const clickItemHandle = (item: MenuItem) => {
79. emit("clickItem", item);
80. };
81. script>
83. <style scoped lang="less">
84. .el-menu {
85. width: 288px;
86. }
87. style>

setup函数

1. <template>
2. <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo" >
3. <template v-for="item in menu">
4. <template v-if="item.child && item.child.length > 0">
5. <el-sub-menu
6. :key="item.id"
7. :index="item.level"
8. :disabled="item.meta?.disabled"
9. :popper-append-to-body="false"
10. >
11. <template #title>
12. <i :class="[item.meta?.icon]">i>
14. <span> {{ generateSpaces(item.level) }} span>
15. <span slot="title"> {{ item.name }}span>
16. template>
17. <MenuTree :menu="item.child" :defaultActive="defaultActive" @clickItem="clickItemHandle" />
18. el-sub-menu>
19. template>
20. <template v-else>
21. <el-menu-item
22. :key="item.id"
23. :index="item.level"
24. :disabled="item.meta?.disabled"
25. :popper-append-to-body="false"
26. @click="clickItemHandle(item)"
27. >
28. <i :class="[item.meta?.icon]">i>
30. <span> {{ generateSpaces(item.level) }} span>
31. <span slot="title">{{ item.name }}span>
32. el-menu-item>
33. template>
34. template>
35. el-menu>
36. template>
38. <script lang="ts">
39. import { defineComponent, toRefs } from 'vue';
40. import type { PropType } from 'vue'
41. import type {MenuItem} from '@/types/lesson'
42. export default defineComponent({
43. name: 'MenuTree',
44. props: {
45. menu: {
46. type: Array as unknown as PropType,
47. required: true,
48. default: () => [],
49. },
50. defaultActive: {
51. type: String as unknown as PropType,
52. required: true,
53. default: '',
54. },
55. },
56. emits: ['update-active-path','clickItem'],
57. setup(props, context) {
58. const { menu, defaultActive } = toRefs(props);
60. const generateSpaces = (level:string) => {
61. let str = ''
62. level.split('').filter(it=>it!='-').forEach(() => {
63. str += '　'
64. })
65. return str
66. }
68. const clickItemHandle = (item:MenuItem) => {
69. context.emit('clickItem', item)
70. }
73. return {
74. clickItemHandle,
75. menu,
76. defaultActive,
77. generateSpaces,
78. }
79. },
80. });
81. script>
83. <style scoped lang="less">
84. .el-menu {
85. width: 288px;
86. }
87. style>

 type就不补充了 可根据自己项目定义，可临时改成any

三、使用组件

1. <template>
2. <MenuTree
3. :menu="menuList"
4. :defaultActive="defaultActive"
5. @clickItem="handleMenuClick"
6. :update-click="handleMenuClick"
7. />
8. template>
10. <script setup lang="ts">
11. import MenuTree from "./components/MenuTree.vue";
12. import type {MenuItem} from '@/types/lesson'
13. import menuData from './MenuData'
15. const defaultActive = ref(''); // "1-1-1-1" 默认选中的数据
16. const menuList = ref(menuData)
18. const handleMenuClick = (item:MenuItem) => {
19. console.log('父组件',item);
20. };
21. script>

补充default-active变量，如果一开始想默认点开第一层的数据 就需要找规律啦

拿到所有的level，通过接口方式返给你 自己平铺拿到所有的level也好 

例如数据格式:

1. let arr = [ "1-1",
2. "1-1-1",
3. "1-1-1-1",
4. "1-1-1-2",
5. "1-1-1-3",
6. "1-1-1-4",
7. "1-1-1-5",
8. "1-1-1-6",
9. "1-1-2",
10. "1-1-2-1"
11. ]

 想要的结果就是 最长且相同数字最多的元素 1-1-1-1

arr.sort((a,b)=> b.split('-').length - a.split('-').length)[0]

使用split防止有些字符串是10、11 两位数字的