重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

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

前锋网站建设公司创新互联公司,前锋网站设计制作,有大型网站制作公司丰富经验。已为前锋1000+提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的前锋做网站的公司定做!

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

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实现一个菜单树形结构就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站名称:vue.js中怎么利用element-ui实现一个菜单树形结构
文章位置:http://cqcxhl.com/article/ijegcj.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP