Vue3?Element-plus和el-menu無限級菜單組件如何封裝

本文小編為大家詳細介紹“Vue3 Element-plus和el-menu無限級菜單組件如何封裝”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“Vue3 Element-plus和el-menu無限級菜單組件如何封裝”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供宜陽網(wǎng)站建設(shè)、宜陽做網(wǎng)站、宜陽網(wǎng)站設(shè)計、宜陽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、宜陽企業(yè)網(wǎng)站模板建站服務，10余年宜陽做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

對于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語法糖

          
        
      
      
      
        
          
          
           {{ generateSpaces(item.level) }} 
          {{ item.name }}
        
      
    
  

 

 

.el-menu {
  width: 288px;
}

setup函數(shù)

            
          
        
        
          
            
            
             {{ generateSpaces(item.level) }} 
            {{ item.name }}
          
        
      
  

 

 

  .el-menu {
    width: 288px;
  }

type就不補充了 可根據(jù)自己項目定義，可臨時改成any

三、使用組件

補充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ù)字的

讀到這里，這篇“Vue3 Element-plus和el-menu無限級菜單組件如何封裝”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：Vue3?Element-plus和el-menu無限級菜單組件如何封裝
轉(zhuǎn)載源于：http://m.jiaotiyi.com/article/ihoihs.html