t-vue-tree
一个基于vue的同步树
ps:当前版本没有做异步树
例子1_一个基础的例子
{{examplesObj[0].bottomShow ? '隐藏代码' : '显示代码'}}
<style>
.demo1-tree-wrapper{
width: 100%;
height: 180px;
}
</style>
<template>
<div class="demo1-tree-wrapper">//注意：页面上一定要放一个你自己的dom容器，并设置其宽高，里面再放Ttree组件,因为tree组件的高度样式是父容器的高度的100%，内容过多时则出现滚动条。
<Ttree ref="demotree"
:data="treeData"
@onToggle="onToggleHandle"
@onCheck="onCheckHandle"
@onSelect="onSelectHandle"
> </Ttree>
</div>
<template>
<script>
import Ttree from 't-vue-tree';
export default {
components: {
Ttree
},
data(){
return {
}
}
}
</script>
事件示例(现有4个事件)：
1. onToggle2. onCheck
3. onSelect(这个事件可以看做是单击版的clickTextHandle)
4. onDblclickTextHandle
你可以f12打开控制台，然后分别点击选中节点、取消选中节点，勾选和取消勾选框，展开折叠节点，看看控制台打印的结果
方法示例：
1.
2.
3.
4.
checkNode({key, val}) 勾选树节点，与该节点相关的父子节点会自动勾上勾选或者半勾选状态参数说明：
key: Sring | 节点的键
val: Array | key键对应的值，是个数组，
例如：
tree.checkNode({ key: 'id', val: [1, 1234556]});
将勾选所有拥有id且id值为1和123456的的节点，并且对其父子节点勾上全勾选or半勾选效果。5.
expandNode({key, val}) 展开树节点，参数说明同上结果展示：
F12看控制台，点击每个按钮后得到的结果console.log了的，控制台更清晰
树的数据示例，留意注释中各个节点的属性说明：
[
{
"title": "parent 1-new2",
"expanded": false,
"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",
"expanded":true,
"checkbox": true,//是否有勾选框,默认false
"checked": false,//是否勾选该节点，默认false
"custormKey": "ccdf"
},
{
"title": "leaf 1-1-2",
"expanded":true,
"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",
"expanded": true,
"checkbox": true,//是否有勾选框,默认false
"checked": false,//是否勾选该节点，默认false
"custormKey": "ccdf",
"children": [
{
"title": "leaf 1-2-1-1",
"expanded": true,
"checkbox": true,//是否有勾选框,默认false
"checked": false,//是否勾选该节点，默认false
"custormKey": "mmccf",
},
{
"title": "leaf 1-2-1-2",
"expanded": true,
"checkbox": true,//是否有勾选框,默认false
"checked": false,//是否勾选该节点，默认false
"custormKey": "mmccf",
},
{
"title": "leaf 1-2-1-3",
"expanded": true,
"checkbox": true,//是否有勾选框,默认false
"checked": false,//是否勾选该节点，默认false
"custormKey": "mmccf",
}
]
},
{
"title": "leaf 1-2-1",
"expanded": true,
"checkbox": true,//是否有勾选框,默认false
"checked": false,//是否勾选该节点，默认false
"custormKey": "ccdf",
}
]
}
]
},
{
"title": "parent 2-new",
"expanded": true,
"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",
"expanded": true,
"checkbox": true,//是否有勾选框,默认false
"checked": true //是否勾选该节点，默认false
},
{
"title": "leaf 2-1-2",
"expanded": true,
"checkbox": true,//是否有勾选框,默认false
"checked": true //是否勾选该节点，默认false
}
]
},
{
"title": "parent 2-2",
"expanded": false,
"checkbox": true,//是否有勾选框,默认false
"checked": true,//是否勾选该节点，默认false
"children": [
{
"title": "leaf 2-2-1",
"expanded": true,
"checkbox": true,//是否有勾选框,默认false
"checked": true //是否勾选该节点，默认false
}
// {
// "title": "leaf 2-2-1",
// "expanded": true,
// "checkbox": true,//是否有勾选框,默认false
// "checked": true,//是否勾选该节点，默认false
// }
]
}
]
}
]