vue-furcate-tree

vue分叉树、组织架构图组件，支持使用模板语法来定义每个节点内容

效果演示

使用

``js
:ft-data="ftData"
@click="click"
@expand="expand"
>
我是#{label}
#{test.a}


// ftData格式
[
{
id: 0, // 必须的，一个唯一标识，用于遍历node时为vnode的key
expand: true, // 必须属性，表示子级节点是否展开
label: '节点1', // 任意自定义属性，将来可用于在模板变量
test: {
a: 'b' // 这也是任意自定义属性，可以在模板中使用test.a方式访问变量
},
children: [
{
id: 1,
label: '节点2',
test: {
a: 'b'
},
expand: false,
children: [
{
id: 3,
label: '节点3',
test: {
a: 'c'
}
},
{
id: 4,
label: '节点3',
test: {
a: 'd'
}
}
]
}
]
}
]

`

模板方式渲染节点

组件将插槽改造为节点渲染模板，可以在模板中使用形式如#{prop}的标签访问ftData中每个节点的属性

例如你的某个节点数据是这样
`js
{
id: 1,
label: '节点1',
test: {
a: 'b'
},
children: [...]
}
`
那么在组件插槽中这样使用就可以访问到节点属性
`js

我是label属性：#{label}
我是test，我可以使用点号继续向下访问属性：#{test.a}

`

这样，对于上述这个节点最后就被渲染成了

`html

我是label属性：节点1
我是test，我可以使用点号继续向下访问属性：b

`

$3

属性

| 属性名称 | 类型 | 说明 |
| ---------- | ---------- | ----------- |
| ftData | Array | 一个有父子级关系的节点对象数组，每个节点对象必须有两个属性：id和expand，具体上方用法注释 |
| expandable | Boolean | 是否允许点击节点展开/收缩子级节点 |
| expandAll | Boolean | 是否展开/收缩全部节点，true为展开全部，false为收缩全部 |
| renderFunc | Function | 函数式渲染节点方法，返回值为字符串，字符串中可以包含html标签，此处本质是dom.innerHTML，参数为当前节点的数据对象，注意：如果有了此属性，模板编译方式会失效 |

renderFunc示例，nodeData参数为每个节点的数据对象
`js
renderFunc(nodeData) {
return nodeData.label
}
`

事件

| 事件名称 | 参数 | 说明 |
| ---------- | ----------- | ----------- |
| click | nodeData {Object}, event | 每个节点的点击事件，nodeData：当前点击的节点数据, event：事件对象 |
| expand | data {Object} | 展开/收缩时触发，参数data有两个属性，nodeData：当前点击的节点数据，expanded：展开状态还是收缩状态|

一个完整的实例

`html



``