這篇文章將為大家詳細講解有關(guān)vue.js中怎么利用element-ui實現(xiàn)一個菜單樹形結(jié)構(gòu)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

前鋒網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,前鋒網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為前鋒1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的前鋒做網(wǎng)站的公司定做！

后臺返回的數(shù)據(jù)格式是這個樣子的：

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
 },
 ]

這是一串具有父子關(guān)系的數(shù)據(jù)，首先就是要把這一大串數(shù)據(jù)轉(zhuǎn)化成樹形結(jié)構(gòu)：

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
運行完后返回的結(jié)構(gòu)就是這個樣子：
[{"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的導航菜單組件，為了實現(xiàn)這樣的樹形結(jié)構(gòu)，將每一級的菜單單獨作為一個組件，通過判斷isContent的值來遞歸。我直接把代碼貼出來

      
         
           
          
             {{item.name}}
           
           
         
         {{item.name}}
      
    
tree-menu組件的代碼：

      
        
          
          {{menu.name}}
        
      
      
        {{menu.name}}
      
    
關(guān)于vue.js中怎么利用element-ui實現(xiàn)一個菜單樹形結(jié)構(gòu)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
            
            
                        

            網(wǎng)站欄目：vue.js中怎么利用element-ui實現(xiàn)一個菜單樹形結(jié)構(gòu)            

            標題路徑：http://weahome.cn/article/ijegcj.html