@pluve/yf-vue-orgtree NPM

安装

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