@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>