vue-trees

🎄 ui base on vue

Programming language: Vue

License: MIT License

Tags: Frameworks     Testing Frameworks     Tree     vue     Treeview    

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>

Example of effect

If you can not see my picture please go my github

If you find any problems during use please feel free to Issues