使用Vue实现一个树组件的示例

HTML代码：

  

  
  
  

  
    
    .treeviewitem-span {
      font-size: 14px;
    }

    
    .treeviewitem-arrow-icon {
      margin-top: 3px;
      margin-left: 3px;
      margin-right: 3px;
      float: left;
      width: 0;
      height: 0;
      border-top-width: 6px;
      border-right-width: 0px;
      border-bottom-width: 6px;
      border-left-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent #666666;
      transform: rotate(0deg);
    }

    
    .treeviewitem-arrow-icon90 {
      margin-top: 3px;
      margin-left: 3px;
      margin-right: 3px;
      float: left;
      width: 0;
      height: 0;
      border-top-width: 6px;
      border-right-width: 0px;
      border-bottom-width: 6px;
      border-left-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent #666666;
      transform: rotate(90deg);
    }

    
    template {
      display: none;
    }
  

  
  


  
  

  
  

  
    
    
    

    勾选结果
  

  

效果图：

以上就是使用Vue实现一个树组件的示例的详细内容，更多关于vue 实现树组件的资料请关注考高分网其它相关文章！