# vue-org-tree

**Repository Path**: devi001/vue-org-tree

## Basic Information

- **Project Name**: vue-org-tree
- **Description**: 基于Vue2.x的简单组织树状图
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2023-03-01
- **Last Updated**: 2024-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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'
import 'vue2-org-tree/dist/style.css'

Vue.use(Vue2OrgTree)

// ...
```

### CDN

``` html
# 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              | description                        |           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`         |                             -                              |
| renderContent     | how to render node label           |     `Function(node)`      |                             -                              |
| labelClassName    | node label class                   | `Function(node)`/`String` |                             -                              |
| selectedKey       | The key of the selected node       |         `String`          |                             -                              |
| selectedClassName | The className of the selected node | `Function(node)`/`String` |                             -                              |
| buttonClassName   | The className of the node button   | `Function(node)`/`String` |                             -                              |
| lazy              | Lazy loading of child nodes        |         `Boolean`         |                             -                              |
| load              | Lazy loading Function              | `Function(node, resolve)` |                             -                              |

### events

| event name | description       | type       |
|------------|-------------------|:-----------|
| click      | Click event       | `Function` |
| mouseover  | onMouseOver event | `Function` |
| mouseout   | onMouseOut event  | `Function` |

### Lazy Loading
支持树类型结构子节点懒加载。设置 `lazy` 属性为 `true` 与加载函数 `load`。
通过指定数据中的 `hasChildren` 字段来指定哪些节点包含子节点，其中当节点中包含 `children` 字段且 `children` 字段值的数组长度大于0，
也被视为包含子节点。`children` 和 `hasChildren` 都可以通过 `props` 配置。

```vue
<template>
  <vue2-org-tree
    :data="treeData"
    :load="asyncLoad"
    lazy />
</template>

<script>
export default {
  name: 'OrgTree',
  data() {
    return {
      treeData: {
        label: '全公司',
        hasChildren: true,
        children: []
      }
    }
  },
  methods: {
    asyncLoad(node, resolve) {
      setTimeout(() => {
        resolve([
          { label: '办公室', hasChildren: false },
          { label: '市场部', hasChildren: false },
          { label: '技术部', hasChildren: false }
        ])
      }, 1000)
    }
  }
}
</script>
```

### Call events

#### on-loaded
We will be called when the lazy node load completes
- params `e` `Event`
- params `data` `Current node data`

#### 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](./images/default.png)

- horizontal

  ![horizontal](./images/horizontal.png)

## Browser support

  use table layout!

> IE9+、Chrome、Firefox、Opera

## License
[MIT](./LICENSE)