插件名称 | vuejs-tree |
---|---|
发布时间 | 2020年9月2日 |
插件作者 | scalia |
高度可定制的vuejs树查看器,用于扩展/折叠文件夹树。
# Yarn
$ yarn add vuejs-tree
# NPM
$ npm install vuejs-tree --save
在包含Vue实例的.js文件顶部添加以下行。
import Tree from 'vuejs-tree'
// 在vue实例中
components: {
'Tree': Tree
},
然后在您的html文件中添加以下行以生成树。您可以根据需要在每页上拥有任意数量的树。
<Tree id="my-tree-id" ref="my-tree-ref" :custom-options="myCustomOptions" :custom-styles="myCustomStyles" :nodes="treeDisplayData"></Tree>
您需要定义要显示的数据,它是哈希的嵌套数组。
例:
data: {
treeDisplayData: [
{
text: 'Root 1',
nodes: [
{
text: 'Child 1',
nodes: [
{
text: 'Grandchild 1'
},
{
text: 'Grandchild 2'
}
]
},
{
text: 'Child 2'
}
]
},
{
text: 'Root 2'
}
]
}
这是一个完全定制的节点:
{
id: 1,
text: 'Root 1',
definition: 'First node',
depth: 1,
checkable: false,
selectable: false,
expandable: true,
disabled: false,
tags: [42],
state: {
checked: false,
expanded: false,
selected: false
},
nodes: [
{},
...
]
}
官网:https://github.com/scalia/vuejs-tree
GitHub下载:https://github.com/scalia/vuejs-tree/archive/master.zip