1.0.1 • Published 9 months ago

vue-organazition-tree v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

更新日志

  • 更新时间 2023/02/20
    • 结合业务层实现对齐，修复左侧层数不一样的情况无法对齐
  • 更新时间 2023/02/16
    • 新增支持根节点对齐，伸缩不改变根节点位置
  • 更新时间 2022/11/04
    • 修复右子树更新左子树丢失问题：vue-okr-tree@1.0.15
  • 更新时间 2022/11/03
    • 修复左子树更新无效问题：vue-okr-tree@1.0.13
  • 更新时间 2022/09/07
    • 修复安装包内容不一样 对应版本：vue-okr-tree@1.0.12
  • 更新时间 2022/07/25
    • 优化文档 对应版本：vue-okr-tree@1.0.11
  • 更新时间 2020/12/02
    • 修复异步修改data不渲染问题 对应版本：vue-okr-tree@1.0.5
  • 更新时间 2020/12/05
    • 修改部分展示 bug 对应版本：vue-okr-tree@1.0.6
  • 更新时间 2021/01/13
    • 增加 updateKeyChildren 方法：vue-okr-tree@1.0.7
  • 更新时间 2021/02/03
    • 增加 node-btn-content 属性，对展开圆圈内容自定义处理 vue-okr-tree@1.0.8
  • 更新时间 2021/02/04
    • 增加 showNodeNum 属性显示子节点数 vue-okr-tree@1.0.9
  • 更新时间 2021/09/07
    • 修复节点倒叙显示问题 对应版本：vue-okr-tree@1.0.10

文档和事例

地址：http://www.longstudy.club/vue-okr-tree-doc/index.html

vue-okr-tree

基于 Vue 2的组织架构树组件

Install

# use npm
npm i vue-okr-tree

# use yarn
yarn add vue-okr-tree

Quick Start

import {VueOkrTree} from 'vue-okr-tree';
import 'vue-okr-tree/dist/vue-okr-tree.css'

// ...

CDN

# css
<link href="http://qjge81f6q.hd-bkt.clouddn.com/vue-okr-tree.css">

# js
<script src="http://qjge81f6q.hd-bkt.clouddn.com/vue-okr-tree.umd.min.js"></script>

API

Attributes

参数说明类型可选值默认值
data展示数据array——
direction树的展开方向Stringhorizontal / verticalvertical
onlyBothTree子树在根节点左右两边展开，该模式只有在 direction 为 horizontal 有效，且必须提供 leftData 数据Boolean—false
leftData展示左子数的数据，该属性于在 onlyBothTree 模式启用array——
label-width节点的宽度，默认为自动宽度。如果 label-width 为 number 类型，单位 px；如果 label-width 为 string 类型，则这个宽度会设置为 节点 的 style.width 的值，节点的宽度会受控于外部样式string/number——
label-height节点的高度，默认为自动高度。如果 label-height 为 number 类型，单位 px；如果 label-height 为 string 类型，则这个高度会设置为 节点 的 style.height 的值，节点的高度会受控于外部样式string/number——
label-class-name节点 className 的回调方法，也可以使用字符串为所有的节点设置一个固定的 classNameFunction(node)/String——
current-lable-class-name当前选中节点的样式Function(node)/String——
show-collapsable节点是否可被展开Boolean—false
show-node-num显示子节点数Boolean—false
default-expand-all是否默认展开所有节点，该参数只有在 show-collapsable 为 true 时有效Boolean—false
render-content树节点的内容区的渲染 FunctionFunction(h, node)——
node-btn-content展开的按钮内容渲染 FunctionFunction(h, node)——
props配置选项，具体看下表object——
node-key每个树节点用来作为唯一标识的属性，整棵树应该是唯一的String——
default-expanded-keys默认展开的节点的 key 的数组(需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。)array——
filter-node-method对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏Function(value, data, node)——
aniamte是否开启节点展开的过渡动画Boolean—false
animate-name过渡动画名称，支持动画类型有 okr-fade-in-linear/okr-fade-in/okr-zoom-in-center/okr-zoom-in-top/okr-zoom-in-bottomString—okr-zoom-in-center

props

参数说明类型可选值默认值
label指定节点标签为节点对象的某个属性值string, function(data, node)——
children指定节点标签为节点对象的某个属性值string——

Events

事件名称说明回调参数
node-click节点被点击时的回调共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-expand节点被展开时触发的事件共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse节点被关闭时触发的事件共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-contextmenu当某一节点被鼠标右键点击时会触发该事件共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

方法

方法名说明回调参数
filter对树节点进行筛选操作接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数
updateKeyChildren通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组
getNode根据 data 或者 key 拿到 Tree 组件中的 node,使用此方法必须设置 node-key 属性(data) 要获得 node 的 key 或者 data
setCurrentNode通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性(node) 待被选节点的 node
setCurrentKey通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性(key) 待被选节点的 key，若为 null 则取消当前高亮的节点
getCurrentKey获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null—
getCurrentNode获取当前被选中节点的 data，若没有节点被选中则返回 null—
remove删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性(data) 要删除的节点的 id 或者 data 或者 node
append为 Tree 中的一个节点追加一个子节点(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
insertBefore为 Tree 的一个节点的前面增加一个节点(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
insertAfter为 Tree 的一个节点的后面增加一个节点(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node

浏览器支持情况

Modern browsers and Internet Explorer 10+.

License

MIT

作品展示

npm.io

vue-chartvue-treeorg-treecharttreeorgokrvue-ork-tree
core-jsgithub-markdown-cssprismjsvue
@everything-registry/sub-chunk-3087
1.0.1

9 months ago