资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vue.js中怎么利用element-ui实现一个菜单树形结构-创新互联

这篇文章将为大家详细讲解有关vue.js中怎么利用element-ui实现一个菜单树形结构,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联公司是一家专注于成都网站建设、做网站与策划设计,小店网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:小店等地区。小店做网站价格咨询:028-86922220

后台返回的数据格式是这个样子的:

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

运行完后返回的结构就是这个样子:

[{"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的值来递归。我直接把代码贴出来


      
         
           
          
             {{item.name}}
           
           
         
         {{item.name}}
      
    

tree-menu组件的代码:


      
        
          
          {{menu.name}}
        
      
      
        {{menu.name}}
      
    

关于vue.js中怎么利用element-ui实现一个菜单树形结构就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:vue.js中怎么利用element-ui实现一个菜单树形结构-创新互联
标题路径:http://www.cdkjz.cn/article/jpisc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220