The document is poorly written and you are welcome to refine your documentation in the process of using it to better help others.
Last Version Update Log
adjusted some style problems, perfected the demo
(Version 1.5.4)
- fix bugs that are not selected by some nodes in the radio mode caused by the previous version (1.5.3)
- perfect Domo Example
(Version 1.5.3)
- add
canDeleteRoot
option to support the removal of root nodes - fix the
async
Invalid bug of the first level node
(Version 1.5.2)
add a node-check
event, ande remove nodeChecked
event, because the nodeChecked
event may be bubbling
中文文档)
Version: 2.x (QQ Group: 255965810
we guess you may also see
version 1.0
Online Demo
https://halower.github.io/vue-tree
SelectTree API (2018-4-15)
The latest release has the ability to support the dropdown tree, extending the following with the same basic attributes and events (consistent with the Tree API)
Parameters | Description | Type | Optional value | Default value |
---|---|---|---|---|
searchable | Search Functionality Required | Boolean | Y | true |
pleasechoosetext | Dropdown box default prompts this article | String | Y | Please choose ... |
searchtext | Search box default prompts this article | String | Y | Search ... |
searchfilter | Custom search pull down tree filter function | Function | Y | Node => mode.title.indexOf (This.searchworld) > 1 |
Effect Chart (no demo here, other effects like Onlinedemo)
How to use
Please read the Tree API documentation before using the selectTree
import { VTree, VSelectTree } from 'vue-tree-halower'
Vue.use (VTree)
Vue.use (VSelectTree)
-------------------
<v-select-tree :data='treeData' v-model="['node-1-2']"/>
Tree API Doc
Node Property
Parameters | Description | Type | Optional values | Default value |
---|---|---|---|---|
id | when this property is empty, the title property will be used as the key | String | Y | - |
title | node name | String | N | - |
children | child nodes | Array[object] | Y | - |
async | whether to load child nodes asynchronously | Boolean | Y | false |
expanded | node Expansion | Boolean | Y | false |
halfcheck | whether the node is half optional (subordinate selected) | Boolean | Y | false |
visible | is the node visible | Boolean | Y | true |
selected | whether the node is selected | Boolean | Y | false |
checked | whether the node check box is selected | Boolean | Y | false |
nocheck | specifies that a node does not render check box when multiple checkboxes are open | Boolean | Y | false |
loading | open load effect | Boolean | Y | false |
chkDisabled | disable the function of a check box for a node | Boolean | Y | false |
hasExpended | node has expended | Boolean | Y | false |
parent | get parent node(when allowGetParentNode=true ,the node will add parent method)) |
Function | - | undefined |
Tree Property
Parameters | Description | Type | Optional values | default value |
---|---|---|---|---|
data | tree Data Source | Array[object] | N | - |
multiple | turn on Check mode | Boolean | Y | false |
tpl | custom templates | JSX | Y | false |
halfcheck | turn on semi-select mode | Boolean | Y | select all |
scoped | quarantine node Selected state | Boolean | Y | false |
draggable | support drag? | Boolean | Y | false |
dragafterexpanded | ro expand after dragging | Boolean | Y | true |
canDeleteRoot | can delete the root node | Boolean | Y | false |
maxLevel | node max level | Number | Y | 1024 |
topMustExpand | the top level must can expand | Boolean | Y | true |
allowGetParentNode | allow get the parent node | Boolean | Y | false |
method
Method name | Description | Parameters |
---|---|---|
getSelectedNodes | returns an array of currently selected nodes,isOriginal:false,ignoreInvisibleNode:false | isOriginal: Boolean,ignoreInvisibleNode: Boolean |
getCheckedNodes | returns the array of nodes selected by the current check box,isOriginal:false,ignoreInvisibleNode:false | isOriginal: Boolean,ignoreInvisibleNode: Boolean |
getNodes | the options objects such as {selected:true}, if empty, use {} | options |
searchNodes | filter:function/string (if it is a function, it will eventually return a Boolean type) | node |
nodeSelected | to select a node | node: Object |
addNode | add a node | parentNode: Object, node: Object |
addNodes | add some nodes | parentNode: Object, nodes: Array |
events
Event name | Description | Parameters |
---|---|---|
node-click | click the node to trigger the event | node: Object |
node-check | click the checkbox to trigger the event | node: Object, checked: boolean |
node-mouse-over | over the node to trigger the event | node: Object, index: Number, parentNode: node |
async-load-nodes | event used to implement asynchronous loading | node: Object |
drag-node-end | drag node end trigger the event | {dragNode: Object, targetNode: Object} |
del-node | after delete a node | { parentNode: Object |
How to use
Step1: install plugins
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
npm install vue-tree-halower --save
Step2: In your .babelrc
{
"presets": ["env"],
"plugins": ["transform-vue-jsx"]
}
Step3: In your main.js
import 'vue-tree-halower/dist/halower-tree.min.css' // you can customize the style of the tree
import VTree from 'vue-tree-halower'
Vue.use(VTree)
Demo
Html
<div class="tree">
<input class="tree-search-input" type="text" v-model.lazy="searchword" placeholder="search..."/>
<button class=" tree-search-btn" type="button" @click="search">GO</button>
<v-tree ref='tree' :data='treeData' :multiple="true" :tpl='tpl' :halfcheck='true' />
</div>
JS
export default {
name: 'HelloWorld',
data () {
return {
searchword: '',
initSelected: ['node-1'],
treeData1: [{
title: 'node1',
expanded: true,
children: [{
title: 'node 1-1',
expanded: true,
children: [{
title: 'node 1-1-1'
}, {
title: 'node 1-1-2'
}, {
title: 'node 1-1-3'
}]
}, {
title: 'node 1-2',
children: [{
title: "<span style='color: red'>node 1-2-1</span>"
}, {
title: "<span style='color: red'>node 1-2-2</span>"
}]
}]
}],
treeData2: [{
title: 'node1',
expanded: false,
async: true
}],
treeData3: [{
title: 'node1',
expanded: true,
children: [{
title: 'node 1-1',
expanded: true,
children: [{
title: 'node 1-1-1'
}, {
title: 'node 1-1-2'
}, {
title: 'node 1-1-3'
}]
}]
}]
}
},
methods: {
// tpl (node, ctx, parent, index, props) {
tpl (...args) {
let {0: node, 2: parent, 3: index} = args
let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
if (node.searched) titleClass += ' node-searched'
return <span>
<button class="treebtn1" onClick={() => this.$refs.tree.addNode(node, {title: 'sync node'})}>+</button>
<span class={titleClass} domPropsInnerHTML={node.title} onClick={() => {
this.$refs.tree.nodeSelected(node)
}}></span>
<button class="treebtn2" onClick={() => this.asyncLoad(node)}>async</button>
<button class="treebtn3" onClick={() => this.$refs.tree.delNode(node, parent, index)}>delete</button>
</span>
},
async asyncLoad (node) {
this.$set(node, 'loading', true)
let pro = new Promise(resolve => {
setTimeout(resolve, 2000, ['async node1', 'async node2'])
})
this.$refs.tree1.addNodes(node, await pro)
this.$set(node, 'loading', false)
},
search () {
this.$refs.tree.searchNodes(this.searchword)
}
}
}
</script>