Vue 2.0+ 文件夹树组件 - vue-tree

Vue 2.0+ 文件夹树组件 - vue-tree
插件名称 vue-tree
版本号 v 0.1.0
发布时间 2021年1月31日
插件作者 weibangtuo

vue树视图组件,用于呈现动态的可折叠文件夹树。

用法

添加以下必需的资源。

<link rel="stylesheet" href="[You Path]font-awesome/4.+/css/font-awesome.min.css">
<link rel="stylesheet" href="src/tree.vue.css">

<script src="[You Path]vue.js"></script>
<script src="src/tree.vue.js"></script>

在您的Vue视图中添加组件。

<div id="app">
    <vue-tree :option="option"></vue-tree>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            option: {
                root: { //根节点,请参见节点选项
                    name: 'Root Node',
                    isParent: true,
                    isOpen: true,
                    children: []
                }
            }
        }
</script>

节点选项

[opt] 表示可选属性。

{ 
  name:‘Node Name' ,
  title:'Node Tag title attr' ,
  isParent:true , //请求父节点
  isOpen:false , // [opt]控制节点折叠或展开
  icon:'fa fa-folder' , // [opt]图标类名称
  openIcon:'fa fa-folder-open' , // [opt]对于父级。当isOpen == true时显示,如果它为null或为空,则显示图标
  closedIcon:'fa fa-folder' , // [opt]对于父级。在isOpen!= true时显示,如果为null或为空,则显示图标
  children:[ ] , //请求父节点
  buttons:[  // [opt] 
    { 
      title:'icon button tag title attr' , // [opt] 
      icon:'fa fa-edit' ,
      click:function (node){  // [opt] 
          // 
      } 
    } 
    // ... 
  ] ,
  showLoading:false, // [opt]对于父级,当`node.showLoading && node._loading`和node打开时,显示加载图标
  onOpened:function (node) { } , // [opt] 
  onClosed:function (node) { }  // [opt] 
}