Popularity
0.7
Stable
Activity
0.0
Stable
20
1
6
Programming language: Vue
License: MIT License
vue-trees alternatives and similar libraries
Based on the "Frameworks" category.
Alternatively, view vue-trees alternatives based on common mentions on social networks and blogs.
-
Cypress
Fast, easy and reliable testing for anything that runs in a browser. -
mocha
☕️ simple, flexible, fun javascript test framework for node.js & the browser -
jasmine
Simple JavaScript testing framework for browsers and node.js -
halower/vue-tree
tree and multi-select component based on Vue.js 2.0 -
FrintJS
Modular JavaScript framework for building scalable and reactive applications -
Webix UI
Stable releases of Webix UI - JavaScript library for building mobile and desktop web apps -
Xeito
🤞 Xeito is a framework for building interactive web applications with Typescript and Tagged Template Literals. -
MonsterJS
Simple but powerful progressive JavaScript framework based on web components.
Appwrite - The open-source backend cloud platform
Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.
Promo
appwrite.io
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of vue-trees or a related project?
README
vue-trees
a tree UI base on vue 2.X
install
npm install vue-trees --save
or
cnpm i vue-trees -S
Quick start
import Vue from 'vue'
import vueTrees from 'vue-trees'
Vue.use(vueTrees)
API DOC (中文文档)
data Property
The data property does not support properties inherited from the prototype chain (if you can use to consider whether the under-complex, it is recommended to check the code)
Param | Description | Types | Editable | Default value |
---|---|---|---|---|
title | Node name | String | - | — |
expanded | Whether the node is expanded | Boolean | Y | false |
checked | Node check box is selected | Boolean | Y | false |
tree Property
Param | Description | Types | Editable | Default value |
---|---|---|---|---|
type | Tree style | String | Y | default |
canCheck | Node can choose | Boolean | Y | false |
draggable | Whether the node can drag | Boolean | Y | false |
dragAndExpanded | Whether to expand after dragging | Boolean | Y | true |
control | Add or delete trees | Boolean | Y | false |
isSolid | Whether it is solid | Boolean | Y | false |
banCheck | Prohibition of choice | Boolean | Y | false |
bgColor | Background color (default type is useless) | String | Y | #fff |
fontColor | Font color (default type is useless) | String | Y | #000 |
node event
Param | Description | Types | Editable | Arguments |
---|---|---|---|---|
beforeAddNode | Increase the node before the trigger event (return 'no' means no new) | Function | Y | 1:Parent node |
afterAddNode | Increase the node after the trigger event | Function | Y | 1:Add node,2:Parent node |
beforeDelNode | Delete the node before the trigger event (return 'no' means do not delete) | Function | Y | 1:Current node |
afterAddNode | Event triggered after node deletion | Function | Y | 1:Current node |
beforeDragNode | Drag the node before the trigger event (return 'no' means do not drag) | Function | Y | 1:Drag node,2:Target node |
afterDragNode | Drag the node after the trigger event | Function | Y | 1:Drag node, 2:Target node |
Demo
<template>
<div class="hello">
<vue-trees :data="data1" :type="'fold'" :canCheck="canCheck" :control="control" :bgColor="bgColor" :fontColor="fontColor"></vue-trees>
<vue-trees :data="data" :canCheck="canCheck" :control="control" :afterAddNode="add" :beforeAddNode="beforeAddNode" ></vue-trees>
<span class="change" @click="mod()">修改</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
data: [{"title": "第一个",
"expanded": true,
"children": [{
"title": "1-1",
"expanded": true,
"children": [{
"title": "1-1-1",
"children": [{
"title": "1-1-1-1"
}]
}, {
"title": "1-1-2"
}, {
"title": "1-1-3"
}]
}]
},
{
"title": "第二个"
}],
data1: [{"title": "第一个",
"expanded": true,
"children": [{
"title": "1-1",
"expanded": true,
"children": [{
"title": "1-1-1",
"children": [{
"title": "1-1-1-1"
}]
}, {
"title": "1-1-2"
}, {
"title": "1-1-3"
}]
}]
},
{
"title": "第二个"
}],
canCheck: true,
control: false,
bgColor: '#339999',
fontColor: 'white'
}
},
mounted () {
},
methods: {
mod () {
console.log(this.data)
this.control = !this.control
},
add: function() {
console.log('Now is add')
},
beforeAddNode (node) {
console.log(node)
return 'no'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.hello {
padding: 20px;
}
.change {
background: #336699;
padding: 5px 20px;
color: white;
border-radius: 5px
}
</style>