這次給大家帶來vue.js+element-ui做出菜單樹形結構，vue.js+element-ui做出菜單樹形結構的注意事項有哪些，下面就是實戰案例，一起來看一下。

由于業務需要，要求實現樹形菜單，且菜單數據由后臺返回，在網上找了幾篇文章，看下來總算有了解決辦法。

場景：根據業務要求，需要實現活動的樹形菜單，菜單數據由后臺返回，最后的效果圖如下：

后臺返回的數據格式是這個樣子的：data=[{

pID:'1',//父ID

name:'目錄一',

menuID:'m1',//本身ID

isContent:false//判斷是否是目錄

},

{

pID:'1',

name:'目錄二',

menuID:'m2',

isContent:false

},

{

pID:'m1',

name:'目錄一--菜單一',

menuID:'m11',

isContent:true

},

{

pID:'m1',

name:'目錄一--目錄一',

menuID:'m12',

isContent:false

},

{

pID:'m12',

name:'目錄一--目錄一--菜單一',

menuID:'m121',

isContent:true

},

{

pID:'m2',

name:'目錄二--菜單一',

menuID:'m21',

isContent:true

},

{

pID:'m2',

name:'目錄二--菜單二',

menuID:'m22',

isContent:true

},

]

這是一串具有父子關系的數據，首先就是要把這一大串數據轉化成樹形結構：tree(){

let data=[{

pID:'1',//父ID

name:'目錄一',

menuID:'m1',//本身ID

isContent:false//判斷是否是目錄

},

{

pID:'1',

name:'目錄二',

menuID:'m2',

isContent:false

},

{

pID:'m1',

name:'目錄一--菜單一',

menuID:'m11',

isContent:true

},

{

pID:'m1',

name:'目錄一--目錄一',

menuID:'m12',

isContent:false

},

{

pID:'m12',

name:'目錄一--目錄一--菜單一',

menuID:'m121',

isContent:true

},

{

pID:'m2',

name:'目錄二--菜單一',

menuID:'m21',

isContent:true

},

{

pID:'m2',

name:'目錄二--菜單二',

menuID:'m22',

isContent:true

},

]

let tree = []

for(let i=0;i

if(data[i].pID == '1'){

let obj = data[i]

obj.list = []

tree.push(obj)

data.splice(i,1)

i--

}

}

menuList(tree)

console.log(tree)

function menuList(arr){

if(data.length !=0){

for(let i=0; i

for(let j=0;j

if(data[j].pID == arr[i].menuID){

let obj = data[j]

obj.list = []

arr[i].list.push(obj)

data.splice(j,1)

j--

}

}

menuList(arr[i].list)

}

}

}

}

運行完后返回的結構就是這個樣子：[{"pID":"1","name":"目錄一","menuID":"m1","isContent":false,"list":[{"pID":"m1","name":"目錄一--菜單一","menuID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目錄一--目錄一","menuID":"m12","isContent":false,"list":[{"pID":"m12","name":"目錄一--目錄一--菜單一","menuID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目錄二","menuID":"m2","isContent":false,"list":[{"pID":"m2","name":"目錄二--菜單一","menuID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目錄二--菜單二","menuID":"m22","isContent":true,"list":[]}]}]

接下來就要展示了，項目中用的element-ui的導航菜單組件，為了實現這樣的樹形結構，將每一級的菜單單獨作為一個組件，通過判斷isContent的值來遞歸。我直接把代碼貼出來

theme="dark"

:default-active="openMenuID"

:default-openeds="openMenuArr"

class="el-menu"

@select="handleSelect">

{{item.name}}

{{item.name}}

tree-menu組件的代碼：

{{menu.name}}

{{menu.name}}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

總結

以上是生活随笔為你收集整理的elementui树状菜单tree_vue.js+element-ui做出菜单树形结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。