做了一個vue的同步tree 的npm組件包
前言：因為現成的tree組件沒有找到。亦或是其依賴的其他東西太多，不太合適引入我們的項目，所以自己做了一個。大概樣式：
在線例子：
https://hamupp.github.io/t-vue-tree/examples/#/basicDemoAndApi
屬性：
1.data {類型Object} 樹的全部數據，格式參考下例，其中的各個字段的說明也看示例中的註釋。在此基礎上你當然可以追加自己的字段。
1 [ 2 { 3 title: ‘parent 1‘, 4 expanded: trueView Code, 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‘, 16children: [ 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 ]
2.treeSelectable {類型Boolean} 樹節點是否有選中效果。默認true
3.treeSelectType {類型String} 僅限兩個值single|multiple。默認single。樹節點的選中效果是單選還是允許多選，正常來說，樹節點的選中效果都是單選，即選中一個節點時，取消之前選中的節點。但就是有些騷包反人類客戶想要多選效果
**ps:**
1.treeSelectable為false時，treeSelectType無效，節點本身的selected字段無效。
2.關於勾選框的，沒有通用的勾選框屬性配置。如果要加勾選框，請將每個節點的內部的checkbox字段設為true，否則該節點沒有勾選框
事件：
1.onToggle 折疊展開一個節點時觸發。返回該節點的所有數據
2.onCheck 勾選|取消勾選一個節點時觸發。返回該節點的所有數據
3.onSelect 選擇|取消選中一個節點時觸發。返回該節點的所有數據
方法：
1.getCheckedNodes 參數：String 僅限兩個值：checked indeterminated 獲取勾選的節點，實心和非實心。返回：Array，勾選的實心或者半實心的節點的集合
2.getSelectedNodes 參數：無，返回：Array，選中的節點的集合
下載安裝和引入方式：
1.npm install t-vue-tree
2.引入並註冊為vue的組件：
方式分2種--全局註冊or局部註冊
(1)全局註冊:
在你的vue項目的入口js中(按照慣例，這個js一般取名為main.js或者app.js或者index.js)註冊為全局的vue組件，然後在所有vue文件中都可以直接使用:
> 例如：main.js中：
<!-- 你的其他代碼 --start-- --> ... import Vue from ‘vue‘ ... <!-- 你的其他代碼 --end-- --> <!-- 引入本tree組件 --start-- --> import Ttree from ‘t-vue-tree‘; Vue.component(‘Ttree‘, Ttree); <!-- 引入本tree組件 --end-- -->
> 然後在需要使用的vue頁面中：
<template>
<!-- 先為tree組件設定一個包裹元素，並設置其寬高-->
<div class=‘your-tree-wrapper‘>
<!-- 裏面寫tree組件-->
<Ttree
:data="treeData"
></Ttree>
</div>
</template>
其中treeData的數據參考上文‘屬性’說明中的data的說明；
(2)局部註冊
在需要使用tree的vue頁面中單獨引入並註冊為一個局部的組件：
> demo.vue
<template>
<div class=‘your-tree-wrapper‘>
<Ttree
:data="treeData"
></Ttree>
</div>
</template>
<script> import Ttree from ‘t-vue-tree‘;//引入本組件 export default { components: {//註冊本組件 Ttree }, data(){ return{
treeData:[。。。數據參考屬性一節的data的說明。。。] } } }
**註意：**
不論哪種方式引入，在vue頁面中使用時，一定要把本組件放在一個你的包裹dom元素中，例如上例中的.your-tree-wrapper的div。因為本tree的寬高css是100%,所以，如果父容器沒有寬高。。。。你懂得撒。。。
git地址：
https://github.com/hamuPP/t-vue-tree
NPM地址：
https://www.npmjs.com/package/t-vue-tree
做了一個vue的同步tree 的npm組件包