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语法糖

          
        
      
      
      
        
          
          
           {{ 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函数

            
          
        
        
          
            
            
             {{ 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 两位数字的