一、安装

npm install vue-orgchart -S

在min.js中

import 'vue-orgchart/dist/style.min.css'

二、模板

<template>
  <div>
    <vo-basic :data="chartData"></vo-basic>
  </div>
</template>
 
<script>
import { VoBasic } from 'vue-orgchart'
export default {
  components: { VoBasic }
  created () {
    this.chartData = {
      name: 'JavaScript',
        children: [
          { name: 'Angular' },
          {
            name: 'React',
            children: [{ name: 'Preact' }]
          },
          {
            name: 'Vue',
            children: [{ name: 'Moon' }]
          }
        ]
    }
}
</script>

三、属性

名称类型必需默认描述
datajson or stringyes数据源用于构建组织结构图。 它可以是json对象或包含ajax请求发送到的URL的字符串。
panbooleannofalse如果用户启用此选项,则用户可以通过鼠标拖放来平移组织结构图。
zoombooleannofalse如果用户启用此选项,用户可以通过鼠标滚轮缩放/缩小组织结构图。
zoominLimitnumberno7允许用户设置放大限制。
zoomoutLimitnumberno0.5允许用户设置缩小限制。
directionstringno“t2b”可用值是t2b(暗示“从上到下”,它是默认值),b2t(暗示“从下到上”),l2r(暗示“从左到右”),r2l(暗示“从右到左”)。
verticalLevelinteger(>=2)no用户可以使用此选项从指定级别垂直对齐节点。
toggleSiblingsRespbooleannofalse启用此选项后,用户可以通过单击左/右箭头分别显示/隐藏左/右兄弟节点。
nodeTitlestringno“name”它将datasource的一个属性设置为orgchart节点的title部分的文本内容。 实际上,用户可以创建一个只有nodeTitle选项的简单orghcart。
nodeIdstringno“id”它将datasource的一个属性设置为每个orgchart节点的唯一标识符。
parentNodeSymbolstringno“fa-users” 使用font awesome图标表示该节点具有子节点。
ajaxURLjsonno它包括四个特性 ,父母,孩子,兄弟姐妹,家庭(要求父节点和兄弟节点)。 顾名思义,不同的propety提供了发送不同节点的ajax请求的URL。
nodeContentstringno它将数据源的一个属性设置为orgchart节点的内容部分的文本内容。
nodeTemplatefunctionno它是一个模板生成函数,用于定制任何复杂的节点内部结构。 它只收到一个参数:“data”代表json datasoure,它将用于渲染一个节点。
createNodefunctionno它是一个用于自定义每个orgchart节点的回调函数。 它收到两个参数:“$node”代表单节点div的jquery对象; “data”代表单个节点的数据源。
exportButtonbooleannofalse它启用了orgchart的导出按钮。
exportFilenamestringno“Orgchart”将当前组织图导出为图片时,它是文件名。
visibleLevelpositiveintegerno它表示在最开始的orgchart扩展到的级别。
exportFileextensionstringno“png”可用值为png和pdf。
chartClassstringno“”当您想在一个页面上实例化多个组织结构图时,您应该为它们添加不同的类名以区分它们。
draggablebooleannofalse如果用户启用此选项,则可以拖放orgchart的节点。 注意:由于对HTML5拖放API的支持不足,此功能在IE上不起作用。
dropCriteriafunctionno用户可以构建自己的标准来限制拖动节点和放置区域之间的关系。 此外,此函数接受三个参数(draggedNode,dragZone,dropZone),只返回boolen值。
initCompletedfunctionno了解表的完全初始化,数据加载和呈现的时间通常很有用,尤其是在使用ajax数据源时。 它收到了一个参数:“$chart”代表初始化图表的jquery对象。
Logo

前往低代码交流专区

更多推荐