vue-chart-tree
是一个特殊布局模式结构的vue Tree
组件
npm install vue-chart-tree --save
import Vue from 'vue'
import VueChartTree from 'vue-chart-tree'
Vue.use(VueChartTree)
// in ES6 modules
import VueChartTree from 'vue-chart-tree'
// in CommonJS
const VueChartTree = require('vue-chart-tree')
export default {
components: {
VueChartTree
}
}
<script src="../node-modules/vue-chart-tree/lib/vue-chart-tree.umd.min.js"></script>
new Vue({
el: '#app',
components: {
'vue-chart-tree': window['vue-chart-tree']
}
})
组件库本身向外暴露了三个变量:
import VueChartTree, { resetTree, updatePartTree } from 'vue-chart-tree'
VueChartTree
即为组件本身;
当开发者自行定义的 slot
节点发生变化时(例如位置、尺寸等发生改变),由开发者主动调用 updatePartTree
进行树状图结构的更新;
如果因为特殊的操作需要重置整个树状图,则可以调用 resetTree
完成, resetTree
接收一个 VueChartTree
节点作为参数(可以通过 $ref
获取)
参见 demo
参数 | 类型 | 描述 | 默认值 | 是否必须 |
---|---|---|---|---|
isRoot |
Boolean |
是否是整个树状结构的根节点(即 rootNode ) |
true |
否 |
treeNodeData |
Object |
当前节点的数据信息 | - | 是 |
参数 | 类型 | 描述 | 默认值 | 是否必须 |
---|---|---|---|---|
children |
Array<treeNodeData> |
当前节点的子节点 | - | 否 |
isOpen |
Boolean |
当前节点是否是展开(open )状态 |
- | 否 |
other |
any |
当前节点相关的其他值,这些值由开发者决定,一般来说是可能会被 slot 使用的值 |
- | 否 |
组件本身只是构建了一个树状结构,以及基本的交互,树状图上的节点由开发者自行决定,通过一个传入的 default slot
实现,所以具备较大的灵活性
具体用法参见 demo
MIT