TreeSelect树选择

树型选择控件。

何时使用

类似 Select 的选择控件,可选择的数据结构是一个树形结构时,可以使用 TreeSelect,例如公司层级、学科系统、分类目录等等。

代码演示

TreeSelect树选择 - 图1

基本

最简单的用法。

  1. import { TreeSelect } from 'antd';
  2. const { TreeNode } = TreeSelect;
  3. class Demo extends React.Component {
  4. state = {
  5. value: undefined,
  6. };
  7. onChange = value => {
  8. console.log(value);
  9. this.setState({ value });
  10. };
  11. render() {
  12. return (
  13. <TreeSelect
  14. showSearch
  15. style={{ width: '100%' }}
  16. value={this.state.value}
  17. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  18. placeholder="Please select"
  19. allowClear
  20. treeDefaultExpandAll
  21. onChange={this.onChange}
  22. >
  23. <TreeNode value="parent 1" title="parent 1">
  24. <TreeNode value="parent 1-0" title="parent 1-0">
  25. <TreeNode value="leaf1" title="my leaf" />
  26. <TreeNode value="leaf2" title="your leaf" />
  27. </TreeNode>
  28. <TreeNode value="parent 1-1" title="parent 1-1">
  29. <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
  30. </TreeNode>
  31. </TreeNode>
  32. </TreeSelect>
  33. );
  34. }
  35. }
  36. ReactDOM.render(<Demo />, mountNode);

TreeSelect树选择 - 图2

从数据直接生成

使用 treeData 把 JSON 数据直接生成树结构。

  1. import { TreeSelect } from 'antd';
  2. const treeData = [
  3. {
  4. title: 'Node1',
  5. value: '0-0',
  6. children: [
  7. {
  8. title: 'Child Node1',
  9. value: '0-0-1',
  10. },
  11. {
  12. title: 'Child Node2',
  13. value: '0-0-2',
  14. },
  15. ],
  16. },
  17. {
  18. title: 'Node2',
  19. value: '0-1',
  20. },
  21. ];
  22. class Demo extends React.Component {
  23. state = {
  24. value: undefined,
  25. };
  26. onChange = value => {
  27. console.log(value);
  28. this.setState({ value });
  29. };
  30. render() {
  31. return (
  32. <TreeSelect
  33. style={{ width: '100%' }}
  34. value={this.state.value}
  35. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  36. treeData={treeData}
  37. placeholder="Please select"
  38. treeDefaultExpandAll
  39. onChange={this.onChange}
  40. />
  41. );
  42. }
  43. }
  44. ReactDOM.render(<Demo />, mountNode);

TreeSelect树选择 - 图3

异步加载

异步加载树节点。

  1. import { TreeSelect } from 'antd';
  2. class Demo extends React.Component {
  3. state = {
  4. value: undefined,
  5. treeData: [
  6. { id: 1, pId: 0, value: '1', title: 'Expand to load' },
  7. { id: 2, pId: 0, value: '2', title: 'Expand to load' },
  8. { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
  9. ],
  10. };
  11. genTreeNode = (parentId, isLeaf = false) => {
  12. const random = Math.random().toString(36).substring(2, 6);
  13. return {
  14. id: random,
  15. pId: parentId,
  16. value: random,
  17. title: isLeaf ? 'Tree Node' : 'Expand to load',
  18. isLeaf,
  19. };
  20. };
  21. onLoadData = treeNode =>
  22. new Promise(resolve => {
  23. const { id } = treeNode.props;
  24. setTimeout(() => {
  25. this.setState({
  26. treeData: this.state.treeData.concat([
  27. this.genTreeNode(id, false),
  28. this.genTreeNode(id, true),
  29. ]),
  30. });
  31. resolve();
  32. }, 300);
  33. });
  34. onChange = value => {
  35. console.log(value);
  36. this.setState({ value });
  37. };
  38. render() {
  39. const { treeData } = this.state;
  40. return (
  41. <TreeSelect
  42. treeDataSimpleMode
  43. style={{ width: '100%' }}
  44. value={this.state.value}
  45. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  46. placeholder="Please select"
  47. onChange={this.onChange}
  48. loadData={this.onLoadData}
  49. treeData={treeData}
  50. />
  51. );
  52. }
  53. }
  54. ReactDOM.render(<Demo />, mountNode);

TreeSelect树选择 - 图4

多选

多选的树选择。

  1. import { TreeSelect } from 'antd';
  2. const { TreeNode } = TreeSelect;
  3. class Demo extends React.Component {
  4. state = {
  5. value: undefined,
  6. };
  7. onChange = value => {
  8. console.log(value);
  9. this.setState({ value });
  10. };
  11. render() {
  12. return (
  13. <TreeSelect
  14. showSearch
  15. style={{ width: '100%' }}
  16. value={this.state.value}
  17. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  18. placeholder="Please select"
  19. allowClear
  20. multiple
  21. treeDefaultExpandAll
  22. onChange={this.onChange}
  23. >
  24. <TreeNode value="parent 1" title="parent 1">
  25. <TreeNode value="parent 1-0" title="parent 1-0">
  26. <TreeNode value="leaf1" title="my leaf" />
  27. <TreeNode value="leaf2" title="your leaf" />
  28. </TreeNode>
  29. <TreeNode value="parent 1-1" title="parent 1-1">
  30. <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
  31. </TreeNode>
  32. </TreeNode>
  33. </TreeSelect>
  34. );
  35. }
  36. }
  37. ReactDOM.render(<Demo />, mountNode);

TreeSelect树选择 - 图5

可勾选

使用勾选框实现多选功能。

  1. import { TreeSelect } from 'antd';
  2. const { SHOW_PARENT } = TreeSelect;
  3. const treeData = [
  4. {
  5. title: 'Node1',
  6. value: '0-0',
  7. key: '0-0',
  8. children: [
  9. {
  10. title: 'Child Node1',
  11. value: '0-0-0',
  12. key: '0-0-0',
  13. },
  14. ],
  15. },
  16. {
  17. title: 'Node2',
  18. value: '0-1',
  19. key: '0-1',
  20. children: [
  21. {
  22. title: 'Child Node3',
  23. value: '0-1-0',
  24. key: '0-1-0',
  25. },
  26. {
  27. title: 'Child Node4',
  28. value: '0-1-1',
  29. key: '0-1-1',
  30. },
  31. {
  32. title: 'Child Node5',
  33. value: '0-1-2',
  34. key: '0-1-2',
  35. },
  36. ],
  37. },
  38. ];
  39. class Demo extends React.Component {
  40. state = {
  41. value: ['0-0-0'],
  42. };
  43. onChange = value => {
  44. console.log('onChange ', value);
  45. this.setState({ value });
  46. };
  47. render() {
  48. const tProps = {
  49. treeData,
  50. value: this.state.value,
  51. onChange: this.onChange,
  52. treeCheckable: true,
  53. showCheckedStrategy: SHOW_PARENT,
  54. placeholder: 'Please select',
  55. style: {
  56. width: '100%',
  57. },
  58. };
  59. return <TreeSelect {...tProps} />;
  60. }
  61. }
  62. ReactDOM.render(<Demo />, mountNode);

API

Tree props

参数说明类型默认值版本
allowClear显示清除按钮booleanfalse
autoClearSearchValue当多选模式下值被选择,自动清空搜索框booleantrue
bordered是否显示边框booleantrue
defaultValue指定默认选中的条目string | string[]-
disabled是否禁用booleanfalse
dropdownClassName下拉菜单的 className 属性string-
dropdownMatchSelectWidth下拉菜单和选择器同宽。默认将设置 min-width,当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动boolean | numbertrue
dropdownRender自定义下拉框内容(originNode: ReactNode, props) => ReactNode-
dropdownStyle下拉菜单的样式object-
filterTreeNode是否根据输入项进行筛选,默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值boolean | function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值)function
getPopupContainer菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。示例function(triggerNode)() => document.body
labelInValue是否把每个选项的 label 包装到 value 中,会把 value 类型从 string 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式booleanfalse
listHeight设置弹窗滚动高度number256
loadData异步加载数据function(node)-
maxTagCount最多显示多少个 tagnumber-
maxTagPlaceholder隐藏 tag 时显示的内容ReactNode | function(omittedValues)-
multiple支持多选(当设置 treeCheckable 时自动变为 true)booleanfalse
placeholder选择框默认文字string-
searchValue搜索框的值,可以通过 onSearch 获取用户输入string-
showArrow是否显示 suffixIcon,单选模式下默认 trueboolean-
showCheckedStrategy定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点)。TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点TreeSelect.SHOW_ALL | TreeSelect.SHOW_PARENT | TreeSelect.SHOW_CHILDTreeSelect.SHOW_CHILD
showSearch是否支持搜索框boolean单选:false | 多选:true
size选择框大小large | middle | small-
suffixIcon自定义的选择框后缀图标, 多选模式下必须同时设置 showArrow 为 trueReactNode-
switcherIcon自定义树节点的展开/折叠图标ReactNode-
treeCheckable显示 Checkboxbooleanfalse
treeCheckStrictlycheckable 状态下节点选择完全受控(父子节点选中状态不再关联),会使得 labelInValue 强制为 truebooleanfalse
treeDatatreeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(value 在整个树范围内唯一)array<{value, title, children, [disabled, disableCheckbox, selectable, checkable]}>[]
treeDataSimpleMode使用简单格式的 treeData,具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:’1’, title:”test1”,…},…], pId 是父节点的 id)false | object<{ id: string, pId: string, rootPId: string }>false
treeDefaultExpandAll默认展开所有树节点booleanfalse
treeDefaultExpandedKeys默认展开的树节点string[]-
treeExpandedKeys设置展开的树节点string[]-
treeIcon是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式booleanfalse
treeNodeFilterProp输入项过滤对应的 treeNode 属性stringvalue
treeNodeLabelProp作为显示的 prop 设置stringtitle
value指定当前选中的条目string | string[]-
virtual设置 false 时关闭虚拟滚动booleantrue4.1.0
onChange选中树节点时调用此函数function(value, label, extra)-
onDropdownVisibleChange展开下拉菜单的回调function(open)-
onSearch文本框值变化时回调function(value: string)-
onSelect被选中时调用function(value, node, extra)-
onTreeExpand展示节点时调用function(expandedKeys)-

Tree 方法

名称描述版本
blur()移除焦点
focus()获取焦点

TreeNode props

建议使用 treeData 来代替 TreeNode,免去手工构造麻烦

参数说明类型默认值版本
checkable当树为 Checkbox 时,设置独立节点是否展示 Checkboxboolean-
disableCheckbox禁掉 Checkboxbooleanfalse
disabled是否禁用booleanfalse
isLeaf是否是叶子节点booleanfalse
key此项必须设置(其值在整个树范围内唯一)string-
selectable是否可选booleantrue
title树节点显示的内容ReactNode—-
value默认根据此属性值进行筛选(其值在整个树范围内唯一)string-

FAQ

onChange 时如何获得父节点信息?

从性能角度考虑,我们默认不透出父节点信息。你可以这样获得:https://codesandbox.io/s/wk080nn81k

自定义 Option 样式导致滚动异常怎么办?

请参考 Select 的 FAQ