Skip to content
A simple organization tree based on Vue2.x
JavaScript CSS Vue
Branch: master
Clone or download
Latest commit fbd8bcc Jul 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images update Dec 1, 2017
src update Jul 8, 2019
.babelrc init commi Nov 21, 2017
.editorconfig init commi Nov 21, 2017
.gitignore update Sep 6, 2018
.npmignore update Sep 6, 2018
.npmrc upgrade to 1.2.0 Jul 8, 2019
.postcssrc.js init commi Nov 21, 2017
README.md
package.json fixed bug #28 Jul 31, 2019
webpack.config.js upgrade to 1.1.0 Sep 25, 2018
yarn.lock

README.md

vue-org-tree

A simple organization tree chart based on Vue2.x

Usage

NPM

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

Import Plugins

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

// ...

CDN

# css
<link href="https://unpkg.com/vue2-org-tree@1.1.0/dist/style.css">

<!--
...
-->

# js
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-org-tree@1.1.0/dist/index.js"></script>

API

  • props

prop descripton type default
data Object
props configure props Object {label: 'label', children: 'children', expand: 'expand'}
labelWidth node label width String | Number auto
collapsable children node is collapsable Boolean true
renderContent how to render node label Function -
labelClassName node label class Function | String -
selectedKey The key of the selected node String -
selectedClassName The className of the selected node Function | String -
  • events

    • on-expand callback function

      • params e Event
      • params data Current node data

      well be called when the collapse-btn clicked

    • on-node-click callback function

      • params e Event
      • params data Current node data

      well be called when the node-label clicked

Example

  • default

    default

  • horizontal

    horizontal

Browser support

use table layout!

IE9+、Chrome、Firefox、Opera

Change log

  • 1.2.0

    • Add props: selectedClassName, selectedKey
  • 1.1.1

    • Fixed bug #11
  • 1.1.0

    • Extract CSS
    • Fixed unable to use in browser #9

License

MIT

You can’t perform that action at this time.