Vue3 Element-plus el-menu無限級菜單組件封裝過程
更新時間：2023年04月26日 11:25:30 作者：奧特曼
對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級菜單組件封裝,需要的朋友可以參考下
對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進行封裝
一、定義數(shù)據(jù)
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.對本身組件進行循環(huán)使用，如果有子集使用本身組件 把child數(shù)據(jù)傳給自己
2.如果沒有子集 使用 el-menu-item
以下代碼對setup( )函數(shù)和setup語法糖分別做了實現(xiàn)
setup語法糖
<template>
<el-menu
:default-active="defaultActive"
:unique-opened="true"
class="el-menu-vertical-demo"
>
<template v-for="item in menu">
<!-- 如果有子集 -->
<template v-if="item.child && item.child.length > 0">
<el-sub-menu
:key="item.id"
:index="item.level"
:disabled="item.meta?.disabled"
:popper-append-to-body="false"
>
<template #title>
<i :class="[item.meta?.icon]"></i>
<!-- 添加空格 表示下級-->
<span> {{ generateSpaces(item.level) }} </span>
<span slot="title"> {{ item.name }}</span>
</template>
<MenuTree
:menu="item.child"
:defaultActive="defaultActive"
@clickItem="clickItemHandle"
/>
</el-sub-menu>
</template>
<!-- 如果沒有子集 -->
<template v-else>
<el-menu-item
:key="item.id"
:index="item.level"
:disabled="item.meta?.disabled"
:popper-append-to-body="false"
@click="clickItemHandle(item)"
>
<i :class="[item.meta?.icon]"></i>
<!-- 添加空格 表示下級-->
<span> {{ generateSpaces(item.level) }} </span>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</template>
<script lang="ts" name="MenuTree" setup>
// 把下面代碼變成setup語法糖的形式
import type { PropType } from "vue";
import type { MenuItem } from "@/types/lesson";
// type 為了方便寫成這樣 可以根據(jù)自己項目設(shè)定type
defineProps({
menu: {
type: Array as unknown as PropType<any[]>,
required: true,
default: () => [],
},
defaultActive: {
type: String as unknown as PropType<string>,
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);
};
</script>
<style scoped lang="less">
.el-menu {
width: 288px;
}
</style>
setup函數(shù)
<template>
<el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo" >
<template v-for="item in menu">
<template v-if="item.child && item.child.length > 0">
<el-sub-menu
:key="item.id"
:index="item.level"
:disabled="item.meta?.disabled"
:popper-append-to-body="false"
>
<template #title>
<i :class="[item.meta?.icon]"></i>
<!-- 添加空格 表示下級-->
<span> {{ generateSpaces(item.level) }} </span>
<span slot="title"> {{ item.name }}</span>
</template>
<MenuTree :menu="item.child" :defaultActive="defaultActive" @clickItem="clickItemHandle" />
</el-sub-menu>
</template>
<template v-else>
<el-menu-item
:key="item.id"
:index="item.level"
:disabled="item.meta?.disabled"
:popper-append-to-body="false"
@click="clickItemHandle(item)"
>
<i :class="[item.meta?.icon]"></i>
<!-- 添加空格 表示下級-->
<span> {{ generateSpaces(item.level) }} </span>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</template>
<script lang="ts">
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<any[]>,
required: true,
default: () => [],
},
defaultActive: {
type: String as unknown as PropType<string>,
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,
}
},
});
</script>
<style scoped lang="less">
.el-menu {
width: 288px;
}
</style>
type就不補充了 可根據(jù)自己項目定義，可臨時改成any
三、使用組件
<template>
<MenuTree
:menu="menuList"
:defaultActive="defaultActive"
@clickItem="handleMenuClick"
:update-click="handleMenuClick"
/>
</template>
<script setup lang="ts">
import MenuTree from "./components/MenuTree.vue";
import type {MenuItem} from '@/types/lesson'
import menuData from './MenuData'
const defaultActive = ref<string>(''); // "1-1-1-1" 默認選中的數(shù)據(jù)
const menuList = ref(menuData)
const handleMenuClick = (item:MenuItem) => {
console.log('父組件',item);
};
</script>補充default-active變量，如果一開始想默認點開第一層的數(shù)據(jù) 就需要找規(guī)律啦
拿到所有的level，通過接口方式返給你 自己平鋪拿到所有的level也好
例如數(shù)據(jù)格式:
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" ]
想要的結(jié)果就是 最長且相同數(shù)字最多的元素 1-1-1-1
arr.sort((a,b)=> b.split('-').length - a.split('-').length)[0]使用split防止有些字符串是10、11 兩位數(shù)字的
到此這篇關(guān)于Vue3 Element-plus el-menu無限級菜單組件封裝的文章就介紹到這了,更多相關(guān)Vue3 Element-plus el-menu內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 去除Element-Plus下拉菜單邊框的實現(xiàn)步驟
- 詳解vue3+element-plus實現(xiàn)動態(tài)菜單和動態(tài)路由動態(tài)按鈕(前后端分離)
- vue3+element-plus動態(tài)路由菜單示例代碼
- vue3 element-plus二次封裝組件系列之伸縮菜單制作
- Vue3+Element-Plus?實現(xiàn)點擊左側(cè)菜單時顯示不同內(nèi)容組件展示在Main區(qū)域功能
- Vue3+Element-Plus實現(xiàn)左側(cè)菜單折疊與展開功能示例
- vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理功能
- element-plus默認菜單打開步驟
相關(guān)文章
本篇文章主要介紹了詳解vue-cli構(gòu)建項目反向代理配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了Vue3中其他的Composition?API,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
使用Vue與WebSocket創(chuàng)建實時通知系統(tǒng)
在現(xiàn)代應(yīng)用開發(fā)中,實時性已成為用戶體驗的一個重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構(gòu)建實時通知系統(tǒng),在本文中,我們將通過一個簡單的示例,使用 Vue 3 的 Composition API（setup 語法糖）來創(chuàng)建一個實時通知系統(tǒng)2024-11-11
簡單了解Vue computed屬性及watch區(qū)別
這篇文章主要介紹了通過實例解析Vue computed屬性及watch區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue3常用的API使用簡介，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件，問咋會給你圍繞主題展開詳細的內(nèi)容介紹，感興趣的小伙伴可以參考一下2022-07-07
今天小編就為大家分享一篇Vue退出登錄時清空緩存的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue使用leafLet方式(繪圖工具),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue組件style中scoped的作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09