halower / Vue Tree
Licence: mit
tree and multi-select component based on Vue.js 2.0
Stars: ✭ 880
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Tree
Vue Koa Demo
🔰A simple full stack demo(CSR & SSR & Docker Support) written by Vue2 & Koa2(Koa1 verson also completed)
Stars: ✭ 730 (-17.05%)
Mutual labels: vue2
Vue Qq
🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
Stars: ✭ 861 (-2.16%)
Mutual labels: vue2
List Pull Loading
list-pull-loading是一个基于VUE实现的下拉刷新,上拉加载的组件。主使用IScroll(iscroll-probe)来实现,提供了项目中数据列表经常会用到的下拉提示信息、上拉提示信息、图片懒加载、回到顶部,其提示信息UI、内容可灵活配置,可使用提供的默认样式也可以自定义也可以隐藏。
Stars: ✭ 17 (-98.07%)
Mutual labels: vue2
Vue2 Datatable
The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it! (DEPRECATED. As I, @kenberkeley, the only maintainer, no longer works for OneWay. Bugs may be fixed but new features or breaking changes might not be merged. However, it's still the best in my mind because of its extremely flexible usage of dynamic components)
Stars: ✭ 867 (-1.48%)
Mutual labels: vue2
Vue Coin Hive
Start mining coins in your Vue projects in 1 second.
Stars: ✭ 14 (-98.41%)
Mutual labels: vue2
Vue Music
基于vue2.0的网易云音乐播放器,api来自于NeteaseCloudMusicApi,v2.0为最新版本
Stars: ✭ 855 (-2.84%)
Mutual labels: vue2
The document is poorly written and you are welcome to refine your documentation in the process of using it to better help others.
中文文档)
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
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 => node.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 |
hasExpanded | node has expanded | Boolean | Y | false |
parent | get parent node(when allowGetParentNode=true ,the node will add parent method)) |
Function | - | undefined |
selDisabled | disable the select function of a node | Boolean | Y | false |
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 |
radio | the selected node only one | Boolean | Y | false |
selectAlone | select is alone | Boolean | Y | false |
method
Method name | Description | Parameters |
---|---|---|
getSelectedNodes | returns an array of currently selected nodes,isOriginal:false, | isOriginal: Boolean, ignoreInvisibleNode: Boolean |
getCheckedNodes | returns the array of nodes selected by the current check box | isOriginal: Boolean,ignoreInvisibleNode: Boolean |
getNodes | the options objects such as {selected:true}, if empty, use {} | options: Object,data: Array, isOriginal: Boolean, ignoreInvisibleNode: Boolean |
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-select | click the select to trigger the event | node: Object, selected: boolean, position: {level, index} |
node-check | click the checkbox to trigger the event | node: Object, checked: boolean, position: {level, index} |
node-mouse-over | over the node to trigger the event | node: Object, index: Number, parentNode: node, position: {level, index} |
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 |
node-expand | click the expand to trigger the event | node: Object, expand: boolean, position: {level, index} |
How to use
Step1: install plugins (Vue Cli3 not necessary, Demo based on VueCli3)
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 (Vue Cli3 not necessary,Demo based on VueCli3)
{
"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>
如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].