Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hukaibaihu/vue-org-tree
A simple organization tree based on Vue2.x
https://github.com/hukaibaihu/vue-org-tree
organization-tree tree vue vue-components
Last synced: 2 days ago
JSON representation
A simple organization tree based on Vue2.x
- Host: GitHub
- URL: https://github.com/hukaibaihu/vue-org-tree
- Owner: hukaibaihu
- License: mit
- Created: 2017-11-21T17:40:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-20T08:51:03.000Z (over 1 year ago)
- Last Synced: 2024-11-01T21:02:27.191Z (9 days ago)
- Topics: organization-tree, tree, vue, vue-components
- Language: JavaScript
- Homepage: https://hukaibaihu.github.io/vue-org-tree/
- Size: 578 KB
- Stars: 975
- Watchers: 24
- Forks: 309
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
``` js
import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'
Vue.use(Vue2OrgTree)
// ...
```
### CDN
``` html
# css
# js
```
## 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
event name | descripton | type
------------------|-----------------------------------------|:----------------------
click | Click event | `Function`
mouseover | onMouseOver event | `Function`
mouseout | onMouseOut event | `Function`
### Call events
#### on-expand
well be called when the collapse-btn clicked
- params `e` `Event`
- params `data` `Current node data`
#### on-node-click
well be called when the node-label clicked
- params `e` `Event`
- params `data` `Current node data`
#### on-node-mouseover
It is called when the mouse hovers over the label.
- params `e` `Event`
- params `data` `Current node data`
#### on-node-mouseout
It is called when the mouse leaves the label.
- params `e` `Event`
- params `data` `Current node data`
## Example
- default
- horizontal
## Browser support
use table layout!
> IE9+、Chrome、Firefox、Opera
## License
[MIT](./LICENSE)