a tree UI base on vue 2.X
npm install vue-trees --save
or
cnpm i vue-trees -S
import Vue from 'vue'
import vueTrees from 'vue-trees'
Vue.use(vueTrees)
API DOC (ä¸æ–‡æ–‡æ¡£)
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 |
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 |
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 |
<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>