Dxw-organization-tree NPM

`使用`

import OrganizationTree from 'dxw-organization-tree'
import 'dxw-organization-tree/dist/dxw-organization-tree.css'

`mode=tree`

<organization-tree v-model="organizationsData" :env-var="process.env.NODE_ENV"/>

`mode=dialogTree`

<organization-tree v-model="organizationsData" :env-var="process.env.NODE_ENV" mode="dialogTree" v-model:showDialog="dialogVisible">
    <el-button @click="dialogVisible = true">点击打开 Dialog</el-button>
</organization-tree>

`mode=popTree`

<organization-tree v-model="organizationsData" :env-var="process.env.NODE_ENV" mode="popTree">
  <el-button>click 激活pop</el-button>
</organization-tree>

`Props`

参数	说明	类型	可选值	默认值
envVar	访问api的环境域	string	development/test/production	*必须
v-model	绑定值	object	—	—
render-after-expand	是否在第一次展开某个树节点后才渲染其子节点	boolean	—	true
lazy	是否懒加载子节点，需与 load 方法结合使用	boolean	—	false
load	加载子树数据的方法，仅当 lazy 属性为true 时生效	function(node, resolve)	—	—
default-expand-all	是否默认展开所有节点	boolean	—	false
multiple	是否多选	boolean	—	false
auto-expand-parent	展开子节点的时候是否自动展开父节点	boolean	—	false
default-expanded-keys	默认展开的节点的 code 的数组	array	—	—
indent	相邻级节点间的水平缩进，单位为像素	number	—	16
accordion	是否每次只打开一个同级树节点展开	boolean	—	false
icon-class	自定义树节点的图标	string	—	true
all-levels	数据name是否级联	boolean	—	true
filterable	是否启用筛选功能	boolean	—	true
mode	tree的模式	string	tree/dialogTree/popTree	tree
show-dialog	是否显示 Dialog,须指定tree的模式为'dialogTree',如传入slot不需指定此prop	boolean	—	—
dialog-width	Dialog 的宽度,须指定tree的模式为'dialogTree'	string / number	—	50%
pop-trigger	pop触发方式,须指定tree的模式为'popTree'	string	click/focus/hover/manual	click
pop-width	pop宽度,须指定tree的模式为'popTree'	String, Number	—	最小宽度 150px
pop-placement	出现位置,须指定tree的模式为'popTree'	string	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom

Slot
name 说明默认元素
— 触发Dialog/Popover的元素 el-button

name	说明	默认元素
—	触发Dialog/Popover的元素	el-button

`Events`

事件名称	说明	回调参数
node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-contextmenu	当某一节点被鼠标右键点击时会触发该事件	共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
check-change	节点选中状态发生变化时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check	当复选框被点击的时候触发	共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
current-change	当前选中节点变化时触发的事件	共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
node-expand	节点被展开时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse	节点被关闭时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身