GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hukaibaihu → Vue Org Tree

hukaibaihu / Vue Org Tree

Licence: mit
A simple organization tree based on Vue2.x

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

vuevue-componentstree

Projects that are alternatives of or similar to Vue Org Tree

Vue Ui For Pc
基于Vue2.x的一套PC端UI组件，包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-76.72%)
Mutual labels:  tree, vue-components
vue3-tree
A tree library for Vue 3
Stars: ✭ 41 (-93.88%)
Mutual labels:  tree, vue-components
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+254.18%)
Mutual labels:  tree, vue-components
Vue Drag Tree
🌴🌳a Vue's drag and drop tree component || 🌾Demo
Stars: ✭ 337 (-49.7%)
Mutual labels:  tree, vue-components
vue-virtualised
Blazing fast scrolling and updating for any amount of list and hierarchical data.
Stars: ✭ 18 (-97.31%)
Mutual labels:  tree, vue-components
Liquor Tree
Tree component based on Vue.js
Stars: ✭ 348 (-48.06%)
Mutual labels:  tree, vue-components
Vue Virtual Collection
Vue component for efficiently rendering large collection data
Stars: ✭ 506 (-24.48%)
Mutual labels:  vue-components
Fern.vim
🌿 General purpose asynchronous tree viewer written in Pure Vim script
Stars: ✭ 552 (-17.61%)
Mutual labels:  tree
Sled
the champagne of beta embedded databases
Stars: ✭ 5,423 (+709.4%)
Mutual labels:  tree
Project Explorer
🎋A CLI tool to create an annotated tree visualization of any project
Stars: ✭ 485 (-27.61%)
Mutual labels:  tree
Chadtree
File manager for Neovim. Better than NERDTree.
Stars: ✭ 653 (-2.54%)
Mutual labels:  tree
Learningmasteringalgorithms C
Mastering Algorithms with C 《算法精解：C语言描述》源码及Xcode工程、Linux工程
Stars: ✭ 615 (-8.21%)
Mutual labels:  tree
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (-18.96%)
Mutual labels:  tree
Vue Svg Loader
🔨 webpack loader that lets you use SVG files as Vue components
Stars: ✭ 514 (-23.28%)
Mutual labels:  vue-components
Kotlin 99
Ninety-Nine Problems in Kotlin
Stars: ✭ 568 (-15.22%)
Mutual labels:  tree
Vue Stripe Elements
A Vue 2 component collection for StripeElements
Stars: ✭ 498 (-25.67%)
Mutual labels:  vue-components
Nanomorph
🚅 - Hyper fast diffing algorithm for real DOM nodes
Stars: ✭ 621 (-7.31%)
Mutual labels:  tree
Vue Drag Tree Table
vue 可以拖拽排序的树形表格
Stars: ✭ 488 (-27.16%)
Mutual labels:  tree
Treelib
An efficient implementation of tree data structure in python 2/3.
Stars: ✭ 540 (-19.4%)
Mutual labels:  tree
Ascii art
Real-Time ASCII Art Rendering Library
Stars: ✭ 599 (-10.6%)
Mutual labels:  tree
View All Similar Projects ➔

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/dist/style.css">

# js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-org-tree/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

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

    default

  • horizontal

    horizontal

Browser support

use table layout!

IE9+、Chrome、Firefox、Opera

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].