TreeSelect 树型选择控件

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

API

TreeSelect

参数说明类型默认值
children树节点ReactNode-
size选择框大小可选值:'small', 'medium', 'large'Enum'medium'
placeholder选择框占位符String-
disabled是否禁用Booleanfalse
hasArrow是否有下拉箭头Booleantrue
hasBorder是否有边框Booleantrue
hasClear是否有清空按钮Booleanfalse
label自定义内联 labelReactNode-
readOnly是否只读，只读模式下可以展开弹层但不能选择Boolean-
autoWidth下拉框是否与选择器对齐Booleantrue
dataSource数据源，该属性优先级高于 childrenArray<Object>-
value（受控）当前值String/Array<String>-
defaultValue（非受控）默认值String/Array<String>null
onChange选中值改变时触发的回调函数签名:Function(value: String/Array, data: Object/Array) => void参数:value: {String/Array} 选中的值，单选时返回单个值，多选时返回数组data: {Object/Array} 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点Function() => {}
showSearch是否显示搜索框Booleanfalse
onSearch在搜索框中输入时触发的回调函数签名:Function(keyword: String) => void参数:keyword: {String} 输入的关键字Function() => {}
notFoundContent无数据时显示内容ReactNode'Not Found'
multiple是否支持多选Booleanfalse
treeCheckable下拉框中的树是否支持勾选节点的复选框Booleanfalse
treeCheckStrictly下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）Booleanfalse
treeCheckedStrategy定义选中时回填的方式可选值:'all'(返回所有选中的节点)'parent'(父子节点都选中时只返回父节点)'child'(父子节点都选中时只返回子节点)Enum'parent'
treeDefaultExpandAll下拉框中的树是否默认展开所有节点Booleanfalse
treeDefaultExpandedKeys下拉框中的树默认展开节点key的数组Array<String>[]
treeLoadData下拉框中的树异步加载数据的函数，使用请参考Tree的异步加载数据Demo签名:Function(node: ReactElement) => void参数:node: {ReactElement} 被点击展开的节点Function-
treeProps透传到 Tree 的属性对象Object{}
defaultVisible初始下拉框是否显示Booleanfalse
visible当前下拉框是否显示Boolean-
onVisibleChange下拉框显示或关闭时触发事件的回调函数签名:Function(visible: Boolean, type: String) => void参数:visible: {Boolean} 是否显示type: {String} 触发显示关闭的操作类型Function() => {}
popupStyle下拉框自定义样式对象Object-
popupClassName下拉框样式自定义类名String-
popupContainer下拉框挂载的容器节点String/Function-
popupProps透传到 Popup 的属性对象Object-
followTrigger是否跟随滚动Boolean-
<!— api-extra-start —>### TreeSelect.Node#
参数说明类型默认值
children树节点ReactNode-
label节点文本内容ReactNode'—-'
selectable单独设置是否支持选中，覆盖 Tree 的 selectableBoolean-
checkable单独设置是否出现复选框，覆盖 Tree 的 checkableBoolean-
editable单独设置是否支持编辑，覆盖 Tree 的 editableBoolean-
draggable单独设置是否支持拖拽，覆盖 Tree 的 draggableBoolean-
disabled是否禁止节点响应Booleanfalse
checkboxDisabled是否禁止勾选节点复选框Booleanfalse
isLeaf是否是叶子节点，设置loadData时生效Booleanfalse

dataSource 数据结构

  1. const dataSource = [{
  2.     label: '服装',
  3.     value: '1',
  4.     key: '1',
  5.     selectable: false,
  6.     children: [{
  7.         label: '男装',
  8.         value: '2',
  9.         key: '2',
  10.         children: [{
  11.             label: '外套',
  12.             value: '4',
  13.             key: '4',
  14.             disableCheckbox: true
  15.         }, {
  16.             label: '夹克',
  17.             value: '5',
  18.             key: '5',
  19.             disabled: true
  20.         }]
  21.     }, {
  22.         label: '女装',
  23.         value: '3',
  24.         key: '3',
  25.         children: [{
  26.             label: '裙子',
  27.             value: '6',
  28.             key: '6'
  29.         }]
  30.     }]
  31. }];

如果不传入 key，TreeSelect 会使用内部计算出来的位置字符串作为 key 值，如果你想指定诸如 treeDefaultExpandedKeys 这样的属性，请传入自定义的 key 值，让它和 value 是一个值，是一个很好的办法。<!— api-extra-end —>

ARIA and KeyBoard

按键说明
Enter打开选择树或选择某一项
Up Arrow获取同级当前项前一项焦点
Down Arrow获取同级当前项后一项焦点
Right Arrow打开当前元素的下一级子树并聚焦到第一项
Left Arrow返回到当前元素的父节点并关闭当前子树

代码示例

基本

最简单的单选用法。

TreeSelect 树型选择控件 - 图1

查看源码在线预览

  1. import { TreeSelect } from '@alifd/next';
  3. const TreeNode = TreeSelect.Node;
  5. class Demo extends React.Component {
  6.     constructor(props) {
  7.         super(props);
  9.         this.handleChange = this.handleChange.bind(this);
  10.     }
  12.     handleChange(value, data) {
  13.         console.log(value, data);
  14.     }
  16.     render() {
  17.         return (
  18.             <TreeSelect treeDefaultExpandAll onChange={this.handleChange} style={{ width: 200 }}>
  19.                 <TreeNode key="1" value="1" label="Component">
  20.                     <TreeNode key="2" value="2" label="Form">
  21.                         <TreeNode key="4" value="4" label="Input" />
  22.                         <TreeNode key="5" value="5" label="Select" disabled />
  23.                     </TreeNode>
  24.                     <TreeNode key="3" value="3" label="Display">
  25.                         <TreeNode key="6" value="6" label="Table" />
  26.                     </TreeNode>
  27.                 </TreeNode>
  28.             </TreeSelect>
  29.         );
  30.     }
  31. }
  33. ReactDOM.render(<Demo />, mountNode);

使用数据直接生成

使用 dataSource 生成树结构，除设置 label, value, key, children 属性外，还可传入 TreeNode 的其他属性，包括 selectable, disabled, checkboxDisabled, isLeaf，推荐使用 dataSource 而不是手动生成 TreeNode 的方式生成树，这样使用更简单，性能更好。

TreeSelect 树型选择控件 - 图2

查看源码在线预览

  1. import { TreeSelect } from '@alifd/next';
  3. const treeData = [{
  4.     label: 'Component',
  5.     value: '1',
  6.     children: [{
  7.         label: 'Form',
  8.         value: '2',
  9.         children: [{
  10.             label: 'Input',
  11.             value: '4'
  12.         }, {
  13.             label: 'Select',
  14.             value: '5',
  15.             disabled: true
  16.         }]
  17.     }, {
  18.         label: 'Display',
  19.         value: '3',
  20.         children: [{
  21.             label: 'Table',
  22.             value: '6'
  23.         }]
  24.     }]
  25. }];
  26. class Demo extends React.Component {
  27.     constructor(props) {
  28.         super(props);
  30.         this.handleChange = this.handleChange.bind(this);
  31.     }
  33.     handleChange(value, data) {
  34.         console.log(value, data);
  35.     }
  37.     render() {
  38.         return (
  39.             <TreeSelect treeDefaultExpandAll dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />
  40.         );
  41.     }
  42. }
  44. ReactDOM.render(<Demo />, mountNode);

复选框多选

展示复选框多选的功能。

TreeSelect 树型选择控件 - 图3

查看源码在线预览

  1. import { TreeSelect } from '@alifd/next';
  3. const treeData = [{
  4.     label: 'Component',
  5.     value: '1',
  6.     children: [{
  7.         label: 'Form',
  8.         value: '2',
  9.         children: [{
  10.             label: 'Input',
  11.             value: '4'
  12.         }, {
  13.             label: 'Select',
  14.             value: '5'
  15.         }]
  16.     }, {
  17.         label: 'Display',
  18.         value: '3',
  19.         children: [{
  20.             label: 'Table',
  21.             value: '6'
  22.         }]
  23.     }]
  24. }];
  26. class Demo extends React.Component {
  27.     constructor(props) {
  28.         super(props);
  30.         this.handleChange = this.handleChange.bind(this);
  31.     }
  33.     handleChange(value, data) {
  34.         console.log(value, data);
  35.     }
  37.     render() {
  38.         return (
  39.             <TreeSelect treeDefaultExpandAll treeCheckable dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />
  40.         );
  41.     }
  42. }
  44. ReactDOM.render(<Demo />, mountNode);

受控

展示树选择受控的用法。

TreeSelect 树型选择控件 - 图4

查看源码在线预览

  1. import { TreeSelect } from '@alifd/next';
  3. const treeData = [{
  4.     label: 'Component',
  5.     value: '1',
  6.     children: [{
  7.         label: 'Form',
  8.         value: '2',
  9.         children: [{
  10.             label: 'Input',
  11.             value: '4'
  12.         }, {
  13.             label: 'Select',
  14.             value: '5'
  15.         }]
  16.     }, {
  17.         label: 'Display',
  18.         value: '3',
  19.         children: [{
  20.             label: 'Table',
  21.             value: '6'
  22.         }]
  23.     }]
  24. }];
  26. class Demo extends React.Component {
  27.     constructor(props) {
  28.         super(props);
  30.         this.state = {
  31.             value: ['4', '6']
  32.         };
  34.         this.handleChange = this.handleChange.bind(this);
  35.     }
  37.     handleChange(value, data) {
  38.         console.log(value, data);
  39.         this.setState({
  40.             value
  41.         });
  42.     }
  44.     render() {
  45.         return (
  46.             <TreeSelect treeDefaultExpandAll treeCheckable dataSource={treeData} value={this.state.value} onChange={this.handleChange} style={{ width: 200 }} />
  47.         );
  48.     }
  49. }
  51. ReactDOM.render(<Demo />, mountNode);

搜索用法

展示树选择的搜索用法。

TreeSelect 树型选择控件 - 图5

查看源码在线预览

  1. import { TreeSelect } from '@alifd/next';
  3. const treeData = [{
  4.     label: 'Component',
  5.     value: '1',
  6.     selectable: false,
  7.     children: [{
  8.         label: 'Form',
  9.         value: '2',
  10.         children: [{
  11.             label: 'Input',
  12.             value: '4'
  13.         }, {
  14.             label: 'Select',
  15.             value: '5',
  16.             disabled: true
  17.         }]
  18.     }, {
  19.         label: 'Display',
  20.         value: '3',
  21.         children: [{
  22.             label: 'Table',
  23.             value: '6'
  24.         }]
  25.     }]
  26. }];
  28. class Demo extends React.Component {
  29.     constructor(props) {
  30.         super(props);
  32.         this.state = {
  33.             value: ['4', '6']
  34.         };
  36.         this.handleChange = this.handleChange.bind(this);
  37.     }
  39.     handleChange(value, data) {
  40.         console.log(value, data);
  41.     }
  43.     render() {
  44.         return (
  45.             <TreeSelect treeDefaultExpandAll showSearch dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />
  46.         );
  47.     }
  48. }
  50. ReactDOM.render(<Demo />, mountNode);

无障碍

通过aria-labelledby对组件进行描述。关于键盘操作请参考ARIA and KeyBoard。

TreeSelect 树型选择控件 - 图6

查看源码在线预览

  1. import { TreeSelect } from '@alifd/next';
  3. const TreeNode = TreeSelect.Node;
  5. class Demo extends React.Component {
  6.     constructor(props) {
  7.         super(props);
  9.         this.handleChange = this.handleChange.bind(this);
  10.     }
  12.     handleChange(value, data) {
  13.         console.log(value, data);
  14.     }
  16.     render() {
  17.         return (
  18.             <div>
  19.                 <span id="a11y-tree-select">TreeSelect: </span>
  20.                 <TreeSelect treeDefaultExpandAll aria-labelledby="a11y-tree-select" onChange={this.handleChange} style={{ width: 200 }}>
  21.                     <TreeNode key="1" value="1" label="Component">
  22.                         <TreeNode key="2" value="2" label="Form">
  23.                             <TreeNode key="4" value="4" label="Input" />
  24.                             <TreeNode key="5" value="5" label="Select" disabled />
  25.                         </TreeNode>
  26.                         <TreeNode key="3" value="3" label="Display">
  27.                             <TreeNode key="6" value="6" label="Table" />
  28.                         </TreeNode>
  29.                     </TreeNode>
  30.                 </TreeSelect>
  31.             </div>
  32.         );
  33.     }
  34. }
  36. ReactDOM.render(<Demo />, mountNode);

相关区块

TreeSelect 树型选择控件 - 图7

暂无相关区块