Vue实战:树形组件

一、展示

在这里插入图片描述
点击粗体能展开节点:
Vue实战:树形组件_第1张图片
Vue实战:树形组件_第2张图片
点击“+” ,还能插入new stuff节点:
Vue实战:树形组件_第3张图片
还能为没有孩子的节点添加多个子节点,如图为 hello节点添加:
Vue实战:树形组件_第4张图片


二、源码

index.html



    
    
    
    Document
    
    


    
    
    

(You can double click on an item to turn it into a folder.)

./Vuetest.css
body {
  font-family: Menlo, Consolas, monospace;
  color: #444;
}
.item {
  cursor: pointer;
}
.bold {
  font-weight: bold;
}
ul {
  padding-left: 1em;
  line-height: 1.5em;
  list-style-type: dot;
}

你可能感兴趣的:(web前端,Vue)