前言:因为现成的tree组件没有找到。亦或是其依赖的其他东西太多,不太合适引入我们的项目,所以自己做了一个。大概样式:

做了一个vue的同步tree 的npm组件包

 

在线例子:

https://hamupp.github.io/t-vue-tree/examples/dist/#/basicDemoAndApi

 

属性:

1.data {类型Object} 树的全部数据,格式参考下例,其中的各个字段的说明也看示例中的注释。在此基础上你当然可以追加自己的字段。

  1 [
  2                     {
  3                         title: 'parent 1',
  4                         expanded: true,
  5                         checkbox: true,//是否有勾选框,默认false
  6                         checked: false,//是否勾选该节点,默认false
  7                         selected: false,//是否选中该节点,默认false
  8                         custormKey: 'ccdf',
  9                         children: [
 10                             {
 11                                 title: 'parent 1-1',
 12                                 expanded: true,
 13                                 checkbox: true,//是否有勾选框,默认false
 14                                 checked: false,//是否勾选该节点,默认false
 15                                 custormKey: 'ccdf',
 16                                 children: [
 17                                     {
 18                                         title: 'leaf 1-1-1',
 19                                         checkbox: true,//是否有勾选框,默认false
 20                                         checked: false,//是否勾选该节点,默认false
 21                                         custormKey: 'ccdf',
 22                                     },
 23                                     {
 24                                         title: 'leaf 1-1-2',
 25                                         checkbox: true,//是否有勾选框,默认false
 26                                         checked: false,//是否勾选该节点,默认false
 27                                         selected:true,//是否选中该节点,默认false
 28                                         custormKey: 'ccdf',
 29                                     }
 30                                 ]
 31                             },
 32                             {
 33                                 title: 'parent 1-2',
 34                                 expanded: true,
 35                                 checkbox: true,//是否有勾选框,默认false
 36                                 checked: false,//是否勾选该节点,默认false
 37                                 custormKey: 'ccdf',
 38                                 children: [
 39                                     {
 40                                         title: 'leaf 1-2-1',
 41                                         checkbox: true,//是否有勾选框,默认false
 42                                         checked: false,//是否勾选该节点,默认false
 43                                         custormKey: 'ccdf',
 44                                         children: [
 45                                             {
 46                                                 title: 'leaf 1-2-1-1',
 47                                                 checkbox: true,//是否有勾选框,默认false
 48                                                 checked: false,//是否勾选该节点,默认false
 49                                                 custormKey: 'mmccf',
 50                                             },
 51                                             {
 52                                                 title: 'leaf 1-2-1-2',
 53                                                 checkbox: true,//是否有勾选框,默认false
 54                                                 checked: false,//是否勾选该节点,默认false
 55                                                 custormKey: 'mmccf',
 56                                             },
 57                                             {
 58                                                 title: 'leaf 1-2-1-3',
 59                                                 checkbox: true,//是否有勾选框,默认false
 60                                                 checked: false,//是否勾选该节点,默认false
 61                                                 custormKey: 'mmccf',
 62                                             }
 63                                         ]
 64                                     },
 65                                     {
 66                                         title: 'leaf 1-2-1',
 67                                         checkbox: true,//是否有勾选框,默认false
 68                                         checked: false,//是否勾选该节点,默认false
 69                                         custormKey: 'ccdf',
 70                                     }
 71                                 ]
 72                             }
 73                         ]
 74                     },
 75                     {
 76                         title: 'parent 2',
 77                         expanded: false,
 78                         checkbox: true,//是否有勾选框,默认false
 79                         checked: true,//是否勾选该节点,默认false
 80                         children: [
 81                             {
 82                                 title: 'parent 2-1',
 83                                 checkbox: true,//是否有勾选框,默认false
 84                                 checked: true,//是否勾选该节点,默认false
 85                                 expanded: true,//是否展开该节点
 86                                 selected: false,//是否选中该节点,默认false
 87                                 expandOnClickNode: false,//点击节点时也展开节点,需要expand属性同时为真,默认false
 88                                 children: [
 89                                     {
 90                                         title: 'leaf 2-1-1',
 91                                         checkbox: true,//是否有勾选框,默认false
 92                                         checked: true,//是否勾选该节点,默认false
 93                                     },
 94                                     {
 95                                         title: 'leaf 2-1-2',
 96                                         checkbox: true,//是否有勾选框,默认false
 97                                         checked: true,//是否勾选该节点,默认false
 98                                     }
 99                                 ]
100                             },
101                             {
102                                 title: 'parent 2-2',
103                                 expanded: true,
104                                 checkbox: true,//是否有勾选框,默认false
105                                 checked: true,//是否勾选该节点,默认false
106                                 children: [
107                                     {
108                                         title: 'leaf 2-2-1',
109                                         checkbox: true,//是否有勾选框,默认false
110                                         checked: true,//是否勾选该节点,默认false
111                                     },
112                                     {
113                                         title: 'leaf 2-2-1',
114                                         checkbox: true,//是否有勾选框,默认false
115                                         checked: true,//是否勾选该节点,默认false
116                                     }
117                                 ]
118                             }
119                         ]
120                     }
121                 ]
View Code

相关文章: