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 |