该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
liming- liming a 1e98d2c 5年前
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

orgTree

介绍

vue组织树插件

安装教程

  1. 拷贝org-tree目录到项目中
  2. 在main.js中引入
import OrgTree from './components/org-tree/index';
Vue.use(OrgTree);
  1. 在页面使用组件
<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不展开

事件

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

方法

# 获取图的所有数据
getData()

操作说明

# 1、修改节点
鼠标单击选中节点后,按回车键,或者直接双击节点

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

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

示例效果

Image discription

示例代码

<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>

空文件

简介

vue组织树插件 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化