正文
做了一个vue的同步tree 的npm组件包
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前言：因为现成的tree组件没有找到。亦或是其依赖的其他东西太多，不太合适引入我们的项目，所以自己做了一个。大概样式：
在线例子：
https://hamupp.github.io/t-vue-tree/examples/dist/#/basicDemoAndApi
属性：
1.data {类型Object} 树的全部数据，格式参考下例，其中的各个字段的说明也看示例中的注释。在此基础上你当然可以追加自己的字段。
[
{
title: 'parent 1',
expanded: true,
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
selected: false,//是否选中该节点，默认false
custormKey: 'ccdf',
children: [
{
title: 'parent 1-1',
expanded: true,
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
custormKey: 'ccdf',
children: [
{
title: 'leaf 1-1-1',
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
custormKey: 'ccdf',
},
{
title: 'leaf 1-1-2',
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
selected:true,//是否选中该节点，默认false
custormKey: 'ccdf',
}
]
},
{
title: 'parent 1-2',
expanded: true,
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
custormKey: 'ccdf',
children: [
{
title: 'leaf 1-2-1',
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
custormKey: 'ccdf',
children: [
{
title: 'leaf 1-2-1-1',
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
custormKey: 'mmccf',
},
{
title: 'leaf 1-2-1-2',
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
custormKey: 'mmccf',
},
{
title: 'leaf 1-2-1-3',
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
custormKey: 'mmccf',
}
]
},
{
title: 'leaf 1-2-1',
checkbox: true,//是否有勾选框,默认false
checked: false,//是否勾选该节点，默认false
custormKey: 'ccdf',
}
]
}
]
},
{
title: 'parent 2',
expanded: false,
checkbox: true,//是否有勾选框,默认false
checked: true,//是否勾选该节点，默认false
children: [
{
title: 'parent 2-1',
checkbox: true,//是否有勾选框,默认false
checked: true,//是否勾选该节点，默认false
expanded: true,//是否展开该节点
selected: false,//是否选中该节点，默认false
expandOnClickNode: false,//点击节点时也展开节点，需要expand属性同时为真，默认false
children: [
{
title: 'leaf 2-1-1',
checkbox: true,//是否有勾选框,默认false
checked: true,//是否勾选该节点，默认false
},
{
title: 'leaf 2-1-2',
checkbox: true,//是否有勾选框,默认false
checked: true,//是否勾选该节点，默认false
}
]
},
{
title: 'parent 2-2',
expanded: true,
checkbox: true,//是否有勾选框,默认false
checked: true,//是否勾选该节点，默认false
children: [
{
title: 'leaf 2-2-1',
checkbox: true,//是否有勾选框,默认false
checked: true,//是否勾选该节点，默认false
},
{
title: 'leaf 2-2-1',
checkbox: true,//是否有勾选框,默认false
checked: true,//是否勾选该节点，默认false
}
]
}
]
}
]
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
