test-demo-seven

一个vue tree的npm组件包

说明：

1.基于vue的同步树，且当前版本只有同步树，没有异步树。

在线demo。基本上我做了几个基础的示例：

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

使用方法：

1.下载npm包:

你的VUE项目的根目录底下运行：

npm install t-vue-tree

2.引入本npm包并注册为vue的组件，两种方式选一种即可：

（方式1）在你的vue项目的入口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>

<script>
export default {
    data(){
    	return{
    		treeData:[
    			{
    				title: 'parent 1',//这是显示在页面上的节点名字
              		expanded: true,//本节点是否展开，
           	   		checkbox: true,//是否有勾选框,默认false
               		checked: false,//是否勾选该节点，默认false
               	 	selected: false,//是否选中该节点，默认false
              	  	children: [
                        {
                            title: 'parent 1-1',
                            expanded: true,
                            checkbox: true,//是否有勾选框,默认false
                            checked: false,//是否勾选该节点，默认false
                        },
                        {
                            title: 'parent 1-2',
                            expanded: true,
                            checkbox: true,//是否有勾选框,默认false
                            checked: false,//是否勾选该节点，默认false
                        }
                   ]    
    			}
    		]
    	}
    }
}
</script>

（方式2）在需要使用的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:[
    			{
    				title: 'parent 1',//这是显示在页面上的节点名字
              		expanded: true,//本节点是否展开，
           	   		checkbox: true,//是否有勾选框,默认false
               		checked: false,//是否勾选该节点，默认false
               	 	selected: false,//是否选中该节点，默认false
              	  	children: [
                        {
                            title: 'parent 1-1',
                            expanded: true,
                            checkbox: true,//是否有勾选框,默认false
                            checked: false,//是否勾选该节点，默认false
                        },
                        {
                            title: 'parent 1-2',
                            expanded: true,
                            checkbox: true,//是否有勾选框,默认false
                            checked: false,//是否勾选该节点，默认false
                        }
                   ]    
    			}
    		]
    	}
    }
}
</script>   

注意： 不论哪种方式引入，在vue页面中使用时，一定要把本组件放在一个你的包裹dom元素中，例如上例中的.your-tree-wrapper的div。因为本tree的宽高css是100%,所以，如果父容器没有宽高。。。。你懂得撒。。。

属性

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

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，选中的节点的集合