前言:因为现成的tree组件没有找到。亦或是其依赖的其他东西太多,不太合适引入我们的项目,所以自己做了一个。大概样式:
在线例子:
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 ]