安装

npm i @pluve/yf-vue-orgtree

使用

<script setup lang="ts">
import type { Key } from 'ant-design-vue/lib/_util/type';
import { reactive, ref } from 'vue';
// 引入
import TreeModel from '@pluve/yf-vue-orgtree'
import '@pluve/yf-vue-orgtree/style.css'
// 选中的数据
const value = reactive<{ data: Key[] }>({
  data: []
})
const visiable = ref(false);
// 控制弹框
const changVisiable = () => {
  visiable.value = true;
}
// 弹框的确定
const onOk = (val: Key[]) => {
  console.log(val.length)
}
const onChange = (keys: Key[]) => {
  value.data = keys
}
const onCancel = () => {
  visiable.value = false;
}
</script>

<template>
  <main>
    <button @click="changVisiable">切换</button>
    <TreeModel 
      type="test"
      orgId="5ffeaee575348f0001cd11cc" 
      :multiple="false" 
      :visiable="visiable" 
      :defaultExpandedKeys="['10004445']" 
      :modal="true" :mask="true" 
      :isSearch="true" 
      :value="value.data" 
      @onOk="onOk"
      @onCancel="onCancel" 
      @onChange="onChange" 
    />
  </main>
</template>

API

|参数|说明|类型|默认值|是否必传| |---|---|---|---|---| |orgId|机构ID(暂时只支持单个机构ID)，|string| |true| |type|环境值配置（'test' 、'prod'）|string| |true| |value|设置选中的值，设置后变成受控组件|Key[]|| |defaultExpandedKeys|默认展开的节点|Key[]|| |isSearch|是否开启搜索框|boolean|true| |modal|是否弹窗模式|boolean|false| |visiable|控制弹窗展示|boolean|true| |title|弹窗标题|string|选择门店| |mask|控制遮罩展示|boolean|fasle| |multiple|控制多选或者单选|boolean|true| |disabled|禁用树|boolean|fasle| |okText|ok字幕|string|确定| |cancelText|取消字幕|string|取消| |onOk|Ok的回调|(orgIds: React.Key[]) => void|| |onChange|值修改的回调|(orgIds: React.Key[]) => void|| |onCancel|取消的回调|() => void||