vue遞歸組件實現(xiàn)elementUI多級菜單
更新時間：2022年07月14日 14:06:12 作者：suoh's?Blog
這篇文章主要為大家詳細介紹了vue遞歸組件實現(xiàn)elementUI多級菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue遞歸組件實現(xiàn)elementUI多級菜單的具體代碼，供大家參考，具體內(nèi)容如下
先看效果：
一、子組件
<template>
? ? <div class="myDiv">
? ? ? ? <!-- 這里的listAll用于接收父組件傳遞進來的菜單列表 -->
? ? ? ? <template v-for="(item,i) in listAll">
? ? ? ? ? ? <!-- 有child就顯示child的下拉型菜單，有小箭頭 -->
? ? ? ? ? ? <el-submenu :index="item.index" :key="i" v-if="item.child.length!=0">
? ? ? ? ? ? ? ? <template slot="title">
? ? ? ? ? ? ? ? ? ? <img :src="item.img" alt="">
? ? ? ? ? ? ? ? ? ? <span>{{item.title}}</span>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? <!-- 再次調(diào)用自身組件，傳入子集，進行循環(huán)遞歸調(diào)用 -->
? ? ? ? ? ? ? ? <Menu :listAll="item.child"></Menu>
? ? ? ? ? ? </el-submenu>
? ? ? ? ? ? <!-- 沒有child,就顯示單個目錄，沒有小箭頭 -->
? ? ? ? ? ? <el-menu-item :index="item.index" v-else :key="i" @click="handleSelect(item.path,item.title,item.index)">
? ? ? ? ? ? ? ? <span slot="title"><img :src="item.img" alt="">{{item.title}}</span>
? ? ? ? ? ? </el-menu-item>
? ? ? ? </template>
? ? </div>
</template>
?
<script>
export default {
? ? name: 'Menu',
? ? components: {},
? ? props: ['listAll'],
? ? data() {
? ? ? ? return {
? ? ? ? ? ? realList: this.listAll,
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? //設(shè)置路由跳轉(zhuǎn)
? ? ? ? handleSelect(path, name, selfIndex) {
? ? ? ? ? ? this.$router.push(
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? path: "/" + path,
? ? ? ? ? ? ? ? ? ? query: {
? ? ? ? ? ? ? ? ? ? ? ? r_n: name,
? ? ? ? ? ? ? ? ? ? ? ? index: selfIndex
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? )
? ? ? ? },
? ? ? ?
? ? },
}
</script>二、菜單數(shù)據(jù)準(zhǔn)備
菜單中包含索引，圖片，名稱，跳轉(zhuǎn)路徑，這里我給出一部分?jǐn)?shù)據(jù)，路由直接用數(shù)字了，你們最好定義為組件的英文名稱，這樣方便維護。
export function menuJson() {
? var data = [{
? ? title: "元數(shù)據(jù)管理",
? ? img: "../../../static/img/manager.png",
? ? index: '1',
? ? child: [
? ? ? {
? ? ? ? "title": "元數(shù)據(jù)信息描述管理", "path": "main/02/005", "img": "../../../static/img/manager.png", "index": "1-2", "child": []
? ? ? },
? ? ? {
? ? ? ? "title": "元數(shù)據(jù)分組定義管理", "path": "main/02/007", "img": "../../../static/img/manager.png", "index": "1-3", "child": []
? ? ? },
? ? ? {
? ? ? ? "title": "元數(shù)據(jù)信息管理", "path": "main/02", "img": "../../../static/img/manager.png", "index": "1-1", "child": [
? ? ? ? ? { "title": "采集元數(shù)據(jù)", "path": "main/02/001", "index": "1-1-1", "img": "../../../static/img/blood.png", "child": [] },
? ? ? ? ? { "title": "元模型", "path": "main/02/004", "index": "1-2-1", "img": "../../../static/img/blood.png", "child": [] },
? ? ? ? ]
? ? ? },
?
? ? ? {
? ? ? ? "title": "元數(shù)據(jù)統(tǒng)計分析管理", "path": "main/01", "index": "1-4", "img": "../../../static/img/manager.png", "child": [
? ? ? ? ? { "title": "元數(shù)據(jù)變更管理", "path": "main/01/001", "index": "1-4-1", "img": "../../../static/img/blood.png", "child": [] },
? ? ? ? ? { "title": "數(shù)據(jù)地圖", "path": "main/01/002", "index": "1-4-2", "img": "../../../static/img/blood.png", "child": [] },
? ? ? ? ? {
? ? ? ? ? ? "title": "元數(shù)據(jù)分析", "path": "main/01/003", "index": "1-4-3", "img": "../../../static/img/yuanfenxi.png", "child": [
?
? ? ? ? ? ? ? { "title": "血緣分析", "path": "main/01/003/0001", "index": "1-4-3-1", "img": "../../../static/img/blood.png", "child": [] },
? ? ? ? ? ? ? { "title": "屬性差異分析", "path": "main/01/003/0003", "index": "1-4-3-2", "img": "../../../static/img/chayi.png", "child": [] },
? ? ? ? ? ? ? { "title": "影響分析", "path": "main/01/003/0004", "index": "1-4-3-3", "img": "../../../static/img/impact.png", "child": [] },
? ? ? ? ? ? ]
? ? ? ? ? },
?
? ? ? ? ]
? ? ? },
? ? ]
? },
? {
? ? title: "規(guī)則管理",
? ? img: "../../../static/img/manager.png",
? ? index: '2',
? ? child: [
? ? ? { "title": "數(shù)據(jù)接口定義管理", "index": "2-1", "path": "main/03/001", "img": "../../../static/img/source.png", "child": [] },
? ? ? { "title": "數(shù)據(jù)轉(zhuǎn)換規(guī)則管理", "index": "2-2", "path": "main/03/004", "img": "../../../static/img/modify.png", "child": [] },
? ? ]
? }
? ]
? return data
}三、父組件調(diào)用
<template>
? ? <div class="content menu">
? ? ? ? <div class="menu_com" :style="{height:scrollHeight+'px'}">
? ? ? ? ? ? <el-col :span="24">
? ? ? ? ? ? ? ? <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :default-openeds="defalutIndex" background-color="#003289" text-color="#fff" active-text-color="#ffd04b">
? ? ? ? ? ? ? ? ? ? //調(diào)用子組件
? ? ? ? ? ? ? ? ? ? <Menu :listAll="listAll"></Menu>
? ? ? ? ? ? ? ? </el-menu>
? ? ? ? ? ? </el-col>
? ? ? ? </div>
? ? </div>
</template>
?
<script>
import Menu from './menu'
import { menuJson } from '../../assets/common/http' //調(diào)用js文件中的菜單數(shù)據(jù)
export default {
? ? name: "Menus",
? ? mixins: [mixin],
? ? components: { Menu },
? ? data() {
? ? ? ? return {
? ? ? ? ? ? scrollHeight: 400,
? ? ? ? ? ? listAll: [],
? ? ? ? ? ? activeIndex: "-1",
? ? ? ? ? ? defalutIndex: []
? ? ? ? }
? ? },
? ? created() {
? ? ? ? //設(shè)置點擊菜單的索引，可以使得刷新后菜單仍保持原來查看的頁面
? ? ? ? this.activeIndex = String(this.$route.query.index);
? ? ? ? this.listAll = menuJson() //通過調(diào)用函數(shù)menuJson,獲取菜單
? ? },
? ? watch: {
? ? ? ? $route(to, from) {
? ? ? ? ? ? this.activeIndex = this.$route.query.index;
? ? ? ? }
? ? },
}
</script>
?
<style scoped lang="less">
@color: #003289;
? ? .menu {
? ? ? ? background: @color;
?
? ? ? ? > div {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? padding-top: 20px;
? ? ? ? ? ? // height: 100%;
? ? ? ? ? ? color: #ffffff;
? ? ? ? ? ? overflow-y: scroll;
? ? ? ? ? ? overflow-x: hidden;
? ? ? ? ? ? &::-webkit-scrollbar {
? ? ? ? ? ? ? ? display: none;
? ? ? ? ? ? }
? ? ? ? ? ? h1 {
? ? ? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? padding: 15px 0 25px 0;
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? .el-menu-demo {
? ? ? ? position: absolute;
? ? ? ? height: 58px !important;
? ? ? ? left: 25%;
? ? ? ? top: 0%;
? ? }
?
</style>補充（面包屑的展示）：
有菜單，肯定需要面包屑的展示，例如
這里我用的方法是，根據(jù)當(dāng)前頁面名稱，從樹形菜單數(shù)據(jù)中查找它的所有父級來實現(xiàn)面包屑導(dǎo)航欄的展示。
html：
<el-breadcrumb separator-class="el-icon-arrow-right">
? ? <el-breadcrumb-item v-for="(item,index) in listMenu" :key="index">{{item}}</el-breadcrumb-item>
</el-breadcrumb>methods:
methods: {
?//獲取樹形數(shù)據(jù)的某個元素的所有父節(jié)點
? ? ? ? getTreePath(tree, func, path) {
? ? ? ? ? ? if (!tree) return []
? ? ? ? ? ? for (const data of tree) {
? ? ? ? ? ? ? ? // 這里按照你的需求來存放最后返回的內(nèi)容吧
? ? ? ? ? ? ? ? //這里的title是我的菜單數(shù)據(jù)里面的名稱字段，你可以改成你的
? ? ? ? ? ? ? ? path.push(data.title)
? ? ? ? ? ? ? ? if (func(data)) return path
? ? ? ? ? ? ? ? if (data.child) {
? ? ? ? ? ? ? ? ? ? //獲取到子數(shù)據(jù)，遞歸調(diào)用
? ? ? ? ? ? ? ? ? ? const findChildren = this.getTreePath(data.child, func, path)
? ? ? ? ? ? ? ? ? ? if (findChildren.length) return findChildren
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? path.pop()
? ? ? ? ? ? }
? ? ? ? ? ? return []
? ? ? ? },
? ? ? ? // 獲取面包屑
? ? ? ? getNavList() {
? ? ? ? ? ? var name = this.$route.query.r_n //先獲取當(dāng)前路由名稱
? ? ? ? ? ? var tree = menuJson() ?//獲取菜單數(shù)據(jù)，menuJson這個函數(shù)上面用了，返回的事菜單數(shù)據(jù)
? ? ? ? ? ? this.path = [] //path用于存放所有父級，調(diào)用前需要清空
? ? ? ? ? ? //data => data.title === name查找數(shù)據(jù)中的title是否和當(dāng)前路由名稱相等
? ? ? ? ? ? this.getTreePath(tree, data => data.title === name, this.path)
? ? ? ? ? ? this.listMenu = this.path ?//找到之后賦值給面包屑路由數(shù)組
? ? ? ? ? ? console.log(this.listMenu)
? ? ? ? }
? ? }以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了最后說說Vue2 SSR 的 Cookies 問題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue中安裝element-ui失敗問題原因及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue監(jiān)聽sessionStorage中值的變化方式
這篇文章主要介紹了vue監(jiān)聽sessionStorage中值的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue-cli創(chuàng)建項目從單頁面到多頁面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項目從單頁面到多頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue操作dom并為dom增加點擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這幾天在開發(fā)中遇見的一個關(guān)于路由傳參后,頁面刷新數(shù)據(jù)丟失的問題,下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參頁面刷新后參數(shù)丟失原因和解決辦法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了在Vue 中獲取下拉框的文本及選項值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue動態(tài)路由實現(xiàn)多級嵌套面包屑的思路與方法
在實際項目中我們會碰到多層嵌套的組件組合而成，比如我們常見的面包屑導(dǎo)航，下面這篇文章就來給大家介紹關(guān)于vue實現(xiàn)動態(tài)路由多級嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要介紹了實現(xiàn)一個 Vue 吸頂錨點組件方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07