vue用递归组件写树形控件的实例代码

最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，不管导航目录有几级，都可以自动显示出来，我一开始觉得element-ui有树形控件，不需要自己写，调用就可以了，后来才发现，调用完事之后，样式不可控，而且要加东西特别困难，无法满足项目需求，于是，一首《凉凉》送给自己，后来去翻vue官网，发现居然有递归组件，一开始我写了两个组件，互相调用，可以写出来，后来返现，如果项目要用到5棵树，我要写10个组件，而且样式控制起来超级恶心，于是我就各种查资料，原生的也试过了，原生js写的并不能在vue项目中使用，因为它用js创造的元素，违反了vue数据驱动视图的原则，所以pass，又听一遍《凉凉》，当然如果有小伙伴对原生js写的树形结构感兴趣我也可以贴出来，那么我们先来看看vue版的吧，后来，我就一直在默念“递归”这个词，递归不就是自己调自己吗，我可以只写一个组件，来调用自己啊，也许应该可以，后来，经过试验终于成功了，下面我贴上代码

vue版的树形控件

看下结果

当然我用的全局组件，如果用vue-cli搭建的环境是一样的，引入组件就可以了，但是一定要注意，组件内必须要用name属性，而且name的名称要和组件名称（组件标签名称）一致才可以

贴一个项目中用的模板吧，相当于做笔记了

  .databaseTree{
    padding-left:12%;
    line-height:40px;
    ul{
      padding-left:12%;
      line-height:40px;
      li{
 span{
   display:inline-block;
   padding-left:23%;
   height:100%;
   width:120%;
   color:#ababab;
   font-size:14px;
   position: relative;
   cursor: pointer;
   &:hover{
     background: #EDF0F5;
   }
   .folderIcon{
     color:#BCBCBC;
     position: absolute;
     top:-1px;
     left:22px;
   }
 }
      }
    }
    li{
      position: relative;
      span{
 display:inline-block;
 padding-left:40px;
 font-size:14px;
 height:100%;
 width:120%;
 cursor: pointer;
 position: relative;
 right:25px;
 top:-2px;
 color:#ababab;
 &:hover{
   background: #EDF0F5;
 }
 .titleIcon{
   color:#C3C3C3;
   font-size:16px;
   position: absolute;
   top:12px;
   left:16px;
 }
 .folderIcon{
   color:#BCBCBC;
   position: absolute;
   top:-1px;
   left:22px;
 }
      }
      .active{
 background: #EDF0F5;
      }
    }
  }

vue版的就到这里了

 下面贴一个原生js版的，感兴趣的小伙伴可以继续往下看

看下结果

总结

以上所述是小编给大家介绍的vue用递归组件写树形控件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！