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

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

 一、定义数据

MenuData.ts

export default [    {        id: "1",        name: "第一级菜单",        level: '1',        child: [            {                id: "11",                name: "第二级菜单",                level: '1-1',                child: [                    {                        id: "111",                        name: "第三级菜单",                        level: '1-1-1',                        child: [                            {                                id: "1111",                                name: "第四级菜单",                                level: '1-1-1-1',                                child: [                                    {                                        id: "11111",                                        name: "第五级菜单",                                        level: '1-1-1-1-1',                                        child: []                                    }                                ]                            }                        ]                    }]            }        ]    },    {        id: "2",        name: "第一级同级菜单",        level: '2',        child: []    } ]

登录后复制

二、封装组件 

封装思想：

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

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

立即学习“前端免费学习笔记（深入）”；

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

setup语法糖

                   0">                                                       {{ generateSpaces(item.level) }}              {{ item.name }}                                                                                     {{ generateSpaces(item.level) }}           {{ item.name }}                     // 把下面代码变成setup语法糖的形式 import type { PropType } from "vue";import type { MenuItem } from "@/types/lesson";// type 为了方便写成这样 可以根据自己项目设定type defineProps({  menu: {    type: Array as unknown as PropType,    required: true,    default: () => [],  },  defaultActive: {    type: String as unknown as PropType,    required: true,    default: [],  },}); const emit = defineEmits(["update-active-path", "clickItem"]); // 返回的空格字符串 用于显示菜单层级 const generateSpaces = (level: string) => {  let str = "";  level.split("")  .filter((it) => it != "-") .forEach(() => {      str += "　";  });  return str;}; // 点击当前菜单项const clickItemHandle = (item: MenuItem) => {  emit("clickItem", item);}; .el-menu {  width: 288px;}

登录后复制

setup函数

               0">                                                                 {{ generateSpaces(item.level) }}                {{ item.name }}                                                                                                 {{ generateSpaces(item.level) }}             {{ item.name }}                           import { defineComponent, toRefs } from 'vue';import type { PropType } from 'vue'import type {MenuItem} from '@/types/lesson'export default defineComponent({  name: 'MenuTree',  props: {    menu: {      type: Array as unknown as PropType,      required: true,      default: () => [],    },    defaultActive: {      type: String as unknown as PropType,      required: true,      default: '',    },  },  emits: ['update-active-path','clickItem'],  setup(props, context) {    const { menu, defaultActive } = toRefs(props);     const generateSpaces = (level:string) => {      let str = ''      level.split('').filter(it=>it!='-').forEach(() => {        str += '　'      })      return str    }     const clickItemHandle = (item:MenuItem) => {      context.emit('clickItem', item)    }        return {      clickItemHandle,      menu,      defaultActive,      generateSpaces,    }  },});   .el-menu {    width: 288px;  }

登录后复制

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

三、使用组件

  import MenuTree from "./components/MenuTree.vue";import type {MenuItem} from '@/types/lesson'import menuData from './MenuData' const defaultActive = ref(''); // "1-1-1-1" 默认选中的数据const menuList = ref(menuData) const handleMenuClick = (item:MenuItem) => {  console.log('父组件',item);};

登录后复制

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

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

例如数据格式:

let arr = [  "1-1",  "1-1-1",  "1-1-1-1",  "1-1-1-2",  "1-1-1-3",  "1-1-1-4",  "1-1-1-5",  "1-1-1-6",  "1-1-2",  "1-1-2-1"]

登录后复制

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

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

登录后复制

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

以上就是Vue3 Element-plus和el-menu无限级菜单组件怎么封装的详细内容，更多请关注【创想鸟】其它相关文章！