# orgTree

**Repository Path**: Inami-Anju/orgTree

## Basic Information

- **Project Name**: orgTree
- **Description**: vue组织树插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# orgTree

#### 介绍
vue组织树插件

#### 安装教程

1.  拷贝org-tree目录到项目中
2.  在main.js中引入
``` bash
import OrgTree from './components/org-tree/index';
Vue.use(OrgTree);
```
3.  在页面使用组件
``` bash
<OrgTree :data="data" :label-class-name="labelClassName" @on-node-click="onNodeClick" ref="orgTree"></OrgTree>
```
#### 使用说明

## 属性
1、data：数据
```
{
    id: 0,
    label: "XXX科技有限公司",
    expand: false,
    children: [
        id: 0,
        label: "XXX科技有限公司",
        expand: false,
    ]
}
```

2、horizontal：显示方向
```
Boolean，false横向/true纵向显示，默认是true
```

3、labelClassName：自定义节点的class名

4、expand：初始化是否展开所有节点，Boolean类型，默认false不展开

## 事件

``` bash
# 节点单击事件
on-node-click，返回当前鼠标对象和节点数据
```

## 方法
``` bash
# 获取图的所有数据
getData()
```

## 操作说明
``` bash
# 1、修改节点
鼠标单击选中节点后，按回车键，或者直接双击节点

# 2、添加子节点
鼠标单击选中节点后，按方向键 ↓

# 3、删除节点
鼠标单击选中节点后，按del删除键
```


## 示例效果

![Image discription](https://gitee.com/chengfengli/imagesStorage/raw/master/161640.png)

## 示例代码

``` bash
<template>
  <div id="app">
    <OrgTree :data="data" :label-class-name="labelClassName" @on-node-click="onNodeClick" ref="orgTree"></OrgTree>
    <div>
      <button v-on:click="getData()">获取数据</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      data: {
        id: 0,
        label: "XXX科技有限公司",
        expand: false,
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端"
              },
              {
                id: 6,
                label: "研发-后端"
              },
              {
                id: 91,
                label: "UI设计"
              },
              {
                id: 10,
                label: "产品经理"
              }
            ]
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部"
              },
              {
                id: 8,
                label: "销售二部"
              }
            ]
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ]
      },
      horizontal: false,
      collapsable: false,
      labelClassName: "bg-white"
    }
  },
  methods: {
    /**
     * 单机节点
     */
    onNodeClick(e, data) {
      
    },
    // 获取数据
    getData(){
      console.log(this.$refs.orgTree.getData());
    }
  }
}
</script>
```