快捷導(dǎo)航

Vue遞歸實(shí)現(xiàn)樹形菜單方法實(shí)例

更新時(shí)間：2018年11月06日 14:10:58 作者：黃鑫

學(xué)習(xí)vue有一段時(shí)間了，最近使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，下面這篇文章主要給大家介紹了關(guān)于Vue利用遞歸實(shí)現(xiàn)樹形菜單的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下

什么是樹形菜單還是要簡(jiǎn)單的啰嗦一下，比如：

上圖是截圖自elementui的實(shí)例，實(shí)現(xiàn)方式是用文檔結(jié)構(gòu)（類似像原生Dom文檔結(jié)構(gòu)的寫法）的方式，好處就是很靈活，可以方便的自定義，作為一個(gè)通用視圖組件庫(kù)這是正確的做法。

在實(shí)際的企業(yè)應(yīng)用中，菜單要比這復(fù)雜很多，層次也要多很多，如果我們采取手動(dòng)編寫文檔結(jié)構(gòu)的方式，會(huì)導(dǎo)致代碼亢長(zhǎng)，閱讀和維護(hù)都很低效。毫無(wú)疑問(wèn)所有Vuer都會(huì)想到用一個(gè)數(shù)據(jù)結(jié)構(gòu)來(lái)驅(qū)動(dòng)文檔結(jié)構(gòu)。vue-router的數(shù)據(jù)結(jié)構(gòu)恰恰就是完美的嵌套層次結(jié)構(gòu)（樹結(jié)構(gòu)），同時(shí)vue文檔中也提到了遞歸組件，基于這兩點(diǎn)，我們來(lái)擼碼，不過(guò)這次有所不同，我們選擇使用render函數(shù)來(lái)實(shí)現(xiàn)，而不是在模板中遞歸。

數(shù)據(jù)結(jié)構(gòu)：vue-router的數(shù)據(jù)結(jié)構(gòu)

const routes = [
 {
 name: 'home',
 path: '/home',
 meta: { text: '首頁(yè)' }
 },
 {
 name: 'inner',
 path: '/inner',
 meta: { text: '內(nèi)部平臺(tái)' },
 children: [
  {
  name: 'oa',
  path: 'oa',
  meta: { text: 'OA' }
  },
  {
  name: 'jira',
  path: 'jira',
  meta: { text: 'Jira' }
  },
  {
  name: 'wiki',
  path: 'wiki',
  meta: { text: 'Wiki' }
  },
  {
  name: 'caiwu',
  path: 'caiwu',
  meta: { text: '財(cái)務(wù)' },
  children: [
   {
   name: 'chailv',
   path: 'chailv',
   meta: { text: '差旅' }
   },
   {
   name: 'richang',
   path: 'richang',
   meta: { text: '日常' },
   children: [
    {
    name: 'taxi',
    path: 'taxi',
    meta: { text: '交通' }
    },
    {
    name: 'tel',
    path: 'tel',
    meta: { text: '通信' }
    }
   ]
   }
  ]
  }
 ]
 },
 {
 name: 'sec',
 path: '/sec',
 meta: { text: '審核' },
 children: [
  {
  name: 'acl',
  path: '/acl',
  meta: { text: 'ACL' }
  }
 ]
 }
]

組件實(shí)現(xiàn)：

先看看render函數(shù)，其中包含一個(gè)遞歸函數(shù)elements：

render (r) {
 return r(
  'el-menu',
  {
  props: {
   backgroundColor: "#545c64",
   textColor: "#fff",
   activeTextColor: "#ffd04b"
  },
  on: {
   select: this.onSelect
  }
  },
  this.elements(this.routes, r)
 )
 }

elements函數(shù)：

elements (routes, r) {
  return routes
  .map(route => {
   if (!route.paths) route.paths = []
   if (route.children && route.children.length) {
   return r(
    'el-submenu',
    {
    props: {
     index: route.name
    }
    },
    [
    r(
     'span',
     {
     slot: 'title'
     },
     [
     route.meta.text
     ]
    ),
    this.elements(route.children, r)
    ]
   )
   } else if (route.path) {
   return r(
    'el-menu-item',
    {
    props: {
     index: route.name
    }
    },
    [
    route.meta.text
    ]
   )
   } else {
   return null
   }
  })
  .filter(item => item)
 }

最終效果：