dxw-organization-tree

组织选择器

基于ElementPlus的Vue.js 3.0

组件适用于大连信维科技有限公司内部人员使用

• 使用

  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

• 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、节点组件本身