📅 最后修改于: 2023-12-03 14:47:00.997000 🧑 作者: Mango
ReactJS UI Ant Design TreeSelect 组件是一款基于 ReactJS 框架的UI组件，它提供了一个可交互的树形下拉菜单，可满足在多层级结构中进行选择的需求。
npm install antd --save
import { TreeSelect } from 'antd';
const treeData = [
{
title: 'Node1',
value: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-1',
},
{
title: 'Child Node2',
value: '0-0-2',
},
],
},
{
title: 'Node2',
value: '0-1',
},
];
function onChange(value) {
console.log(value);
}
function Demo() {
return (
<TreeSelect
showSearch
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={treeData}
placeholder="Please select"
allowClear
treeDefaultExpandAll
onChange={onChange}
/>
);
}
ReactDOM.render(
<Demo />,
mountNode,
);
<TreeSelect>
<TreeNode />
</TreeSelect>
| 属性名 | 说明 | 类型 | 默认值 |
|---------------------|------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------|--------------|
| allowClear | 支持清除, 单选模式有效 | boolean | false |
| autoClearSearchValue| 在非 multiple 模式下，是否自动清空搜索框内容 | boolean | true |
| autoFocus | 默认获取焦点 | boolean | false |
| dropdownClassName | 下拉菜单的 className 属性 | string | - |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| dropdownPopupAlign | 下拉菜单的对齐方式, 不支持宽度自适应 | Object | {} |
| dropdownStyle | 下拉菜单的 style 属性 | Object | - |
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean or Function(filter: String, treeNode: TreeNode) => boolean | false |
| getPopupContainer | 指定下拉菜单的容器 | Function(triggerNode) => HTMLElement | () => document.body |
| loadData | 异步加载数据 | Function(node: TreeNode) | - |
| maxTagCount | 最多显示多少个 tag，响应式 | number | - |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode | - |
| multiple | 支持多选, 与 TreeCheckable 互斥 | boolean | false |
| placeholder | 选择框默认文字 | string | - |
| searchPlaceholder | 搜索框默认文字 | string | - |
| searchRender | 自定义搜索函数，输入参数为 treeNode(当前搜索到的节点)，ti (输入框内容)， 返回值为 bool | Function(treeNode, ti) => bool | - |
| showCheckedStrategy | 定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点). TreeSelect.SHOW_PARENT: 显示父节点(当父节点下所有子节点都选中时). TreeSelect.SHOW_CHILD: 只显示子节点(默认) | enum{'SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD'} | SHOW_CHILD |
| showSearch | 在下拉中显示搜索框 | boolean | false |
| size | 输入框大小 | string | default |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |
| tagRender | 自定义 tag 展示内容 | Function({ label, value, closable }) => ReactNode | - |
| treeData | treeNodes 数据，如果设置则节点为受控模式 | Array<{ title, value, children, [disabled], [key], [switcherIcon], [icon], [isLeaf] }> | [] |
| treeDataSimpleMode | 是否简单模式，会自动转换 label 为 title value 为 key | boolean or Object({ id: 'id', pId: 'pId', rootPId: null }) | false |
| treenodeLabelProp | 作为显示的 prop 名称 | string | title |
| treeExpandedKeys | 默认展开的树节点 | string[] | - |
| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' |
| treeNodeLabelProp | 作为显示的 prop 名称 | string | 'title' |
| value | 指定当前选中的条目 | string or string[] | - |
| onChange | 选中或取消选中触发的回调函数 | function(value, label, extra) | - |
| onPopupScroll | 下拉列表滚动时触发 | function({ event, tree }) | - |
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值或节点 | function(value, node, extra) | - |
| onTreeExpand | 展开节点时调用，参数为展开的节点及是否展开(如果节点全部收起，为收起的节点) | function(expandedKeys, {expanded: bool, node}) | - |
| 属性名 | 说明 | 类型 | 默认值 |
|-------------|------------------------|---------------------------|--------|
| disabled | 是否禁用 | boolean | false |
| icon | 自定义图标 | ReactNode or (props) => ReactNode | - |
| isLeaf | 是否叶子节点 | boolean | - |
| key | TreeSelect 会把此属性作为 value 使用，如果没有设置则使用 title 做为 value| string | title |
| selectable | 是否可选 | boolean | true |
| title | 标题 | string/ReactNode | '---' |
| value | 默认根据此属性值进行筛选，具体见 filterTreeNode 的实现 | string | '' |
TreeSelect 内部会根据 treeExpandedKeys 属性，默认展开所有子节点。因此 ensureLoaded 应该写在 onSelect 回调函数中，否则无法通过 setState 来更新数据源，无法展开本节点的子节点。