org-Tree
组织机构树组件
Tree
弹框
import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';
export default () => {
// 控制弹窗
const [visiable, setVisiable] = React.useState<boolean>(false)
// 返回数据
const [selectedData, setSelectedData] = React.useState<React.Key[]>([]);
React.useEffect(() => {
console.log(selectedData);
}, [selectedData])
return (
<>
<button onClick={() => {setVisiable(!visiable)}}>
{visiable ? "隐藏" : "展示"}
</button>
<Tree
type='test'
value={selectedData}
onChange={setSelectedData}
modal={true}
visiable={visiable}
title={"门店选择"}
multiple={true}
width={442}
orgId={'5ffeaee575348f0001cd11cc'}
defaultExpandedKeys={['1']}
onOk={(keys: React.Key[]) => {
setSelectedData(keys);
message.info(`选中了${keys.length}个组织`);
}}
onCancel={() => {
setVisiable(false);
}}
/>
</>
)
}多选门店
import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';
export default () => {
// 返回数据
const [selectedData, setSelectedData] = React.useState<React.Key[]>([]);
return (
<>
<Tree
type='test'
width={442}
value={selectedData}
onChange={setSelectedData}
multiple={true} // 设置为true为多选
orgId={'62b91e09fa09500001b7a6f4'}
defaultExpandedKeys={['10027581']}
isSearch={false}
/>
</>
)
}单选门店
import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';
export default () => {
// 返回数据
const [selectedData, setSelectedData] = React.useState<React.Key[]>([]);
return (
<>
<Tree
type='test'
value={selectedData}
onChange={setSelectedData}
isSearch={false}
multiple={false} // 设置为false为单选
width={442}
orgId={'62b91e09fa09500001b7a6f4'}
defaultExpandedKeys={['10027581']}
/>
</>
)
}搜索
import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';
export default () => {
// 返回数据
const [selectedData, setSelectedData] = React.useState<React.Key[]>([]);
return (
<>
<Tree
type='test'
value={selectedData}
onChange={setSelectedData}
isSearch={true}
multiple={false} // 设置为false为单选
width={442}
orgId={'62b91e09fa09500001b7a6f4'}
defaultExpandedKeys={['10027581']}
/>
</>
)
}禁用
import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';
export default () => {
return (
<>
<Tree
type='test'
isSearch={false}
multiple={false}
disabled={true} // 设置为true 禁止选择
width={442}
orgId={'62b91e09fa09500001b7a6f4'}
defaultExpandedKeys={['10027581']}
/>
</>
)
}API
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
|---|---|---|---|---|
| orgId | 机构ID(暂时只支持单个机构ID)， | string | true | |
| type | 环境值配置（'test' 、'prod'） | string | true | |
| value | 设置选中的值，设置后变成受控组件 | React.Key[] | ||
| defaultSelected | 默认选中的节点 | React.Key[] | ||
| defaultExpandedKeys | 默认展开的节点 | React.Key[] | ||
| isSearch | 是否开启搜索框 | boolean | true | |
| checkStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false | |
| height | 组件高度 | number、string | ||
| width | 组件宽度 | number、string | ||
| modal | 是否弹窗模式 | boolean | false | |
| visiable | 控制弹窗展示 | boolean | true | |
| title | 弹窗标题 | string | 选择门店 | |
| mask | 控制遮罩展示 | boolean | fasle | |
| multiple | 控制多选或者单选 | boolean | true | |
| disabled | 禁用树 | boolean | fasle | |
| okText | ok字幕 | string | 确定 | |
| cancelText | 取消字幕 | string | 取消 | |
| onOk | Ok的回调 | (keys: React.Key[], selectNodata: ITreeNode[]) => void | ||
| onChange | 值修改的回调 | (orgIds: React.Key[], selectNodata: ITreeNode[]) => void | ||
| onCancel | 取消的回调 | () => void |