@pluve/yf-vue-orgtree
TypeScript icon, indicating that this package has built-in type declarations

0.0.14 • Public • Published

安装

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

Readme

Keywords

none

Package Sidebar

Install

npm i @pluve/yf-vue-orgtree

Weekly Downloads

1

Version

0.0.14

License

ISC

Unpacked Size

33 kB

Total Files

20

Last publish

Collaborators

  • fuqiting
  • zhaoyajie
  • annan1220
  • pengfeng365
  • plutolove
  • vdfor
  • ddg-dany
  • yangwend
  • yaqin8023
  • damonchen
  • lee2545
  • abel0222
  • stevenluo
  • xiongyan
  • deng_cheng