A tree UI base on vue 2.X

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>

GitHub