li_orgtree

orgtree

vue组织树插件

Build Setup

# install dependencies
npm install li_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删除键

示例

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