a tree ui base on vue
Clone or download
Latest commit c7a3877 Feb 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Change a bug Feb 23, 2018
src change css Feb 24, 2018
.gitattributes add gitattributes Feb 23, 2018
.gitignore init Feb 12, 2018
LICENSE Initial commit Feb 12, 2018
README.md change readme Feb 24, 2018
README_CN.md change readme Feb 24, 2018
bundle.css two Feb 21, 2018
data.json two Feb 21, 2018
package.json change readme Feb 23, 2018
rollup.config.js two Feb 21, 2018

README.md

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