TreeSelect 树型选择控件

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

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

开发指南

何时使用

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

API

树型选择控件

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
children树节点ReactNode-
size选择框大小可选值:'small', 'medium', 'large'Enum'medium'
shape选择框形状可选值:'normal', 'arrow-only'Enum'normal'
placeholder选择框占位符String-
disabled是否禁用Booleanfalse
hasArrow是否显示右侧的箭头Booleantrue
hasClear是否显示清空按钮，该按钮可以清空当前选中的值，该属性仅在单选模式下有效Booleanfalse
autoWidth下拉框是否与选择器对齐Booleanfalse
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() => {}
defaultVisible初始下拉框是否显示Booleanfalse
showSearch是否显示搜索框Booleanfalse
onSearch在搜索框中输入时触发的回调函数签名:Function(keyword: String) => void参数:keyword: {String} 输入的关键字Function() => {}
multiple是否支持多选Booleanfalse
treeCheckable下拉框中的树是否支持勾选节点的复选框Booleanfalse
treeCheckStrictly下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）Booleanfalse
treeDefaultExpandAll下拉框中的树是否默认展开所有节点Booleanfalse
treeDefaultExpandedKeys下拉框中的树默认展开节点key的数组Array<String>[]
treeLoadData下拉框中的树异步加载数据的函数，使用请参考Tree的异步加载数据Demo签名:Function(node: ReactElement) => void参数:node: {ReactElement} 被点击展开的节点Function-
popupClassName下拉框样式自定义类名String-
container下拉框挂载的容器节点String/Function-

代码示例

基本

最简单的单选用法。

TreeSelect 树型选择控件 - 图1

查看源码在线预览

  1. import { TreeSelect } from "@icedesign/base";
  3. const TreeNode = TreeSelect.Node;
  5. class Demo extends React.Component {
  6.   handleChange(value, data) {
  7.     console.log(value, data);
  8.   }
  10.   render() {
  11.     return (
  12.       <TreeSelect
  13.         treeDefaultExpandAll
  14.         onChange={::this.handleChange}
  15.         hasClear
  16.         autoWidth
  17.         style={{ width: 200 }}
  18.       >
  19.         <TreeNode key="1" value="1" label="服装">
  20.           <TreeNode key="2" value="2" label="男装">
  21.             <TreeNode key="4" value="4" label="外套" />
  22.             <TreeNode key="5" value="5" label="夹克" />
  23.           </TreeNode>
  24.           <TreeNode key="3" value="3" label="女装">
  25.             <TreeNode key="6" value="6" label="裙子" />
  26.           </TreeNode>
  27.         </TreeNode>
  28.       </TreeSelect>
  29.     );
  30.   }
  31. }
  33. ReactDOM.render(<Demo />, mountNode);

复选框多选

展示复选框多选的功能。

TreeSelect 树型选择控件 - 图2

查看源码在线预览

  1. import { TreeSelect } from "@icedesign/base";
  3. const treeData = [
  4.   {
  5.     label: "服装",
  6.     value: "1",
  7.     children: [
  8.       {
  9.         label: "男装",
  10.         value: "2",
  11.         children: [
  12.           {
  13.             label: "外套",
  14.             value: "4"
  15.           },
  16.           {
  17.             label: "夹克",
  18.             value: "5"
  19.           }
  20.         ]
  21.       },
  22.       {
  23.         label: "女装",
  24.         value: "3",
  25.         children: [
  26.           {
  27.             label: "裙子",
  28.             value: "6"
  29.           }
  30.         ]
  31.       }
  32.     ]
  33.   }
  34. ];
  36. class Demo extends React.Component {
  37.   handleChange(value, data) {
  38.     console.log(value, data);
  39.   }
  41.   render() {
  42.     return (
  43.       <TreeSelect
  44.         treeDefaultExpandAll
  45.         treeCheckable
  46.         autoWidth
  47.         dataSource={treeData}
  48.         onChange={::this.handleChange}
  49.         style={{ width: 200 }}
  50.       />
  51.     );
  52.   }
  53. }
  55. ReactDOM.render(<Demo />, mountNode);

受控

展示树选择受控的用法。

TreeSelect 树型选择控件 - 图3

查看源码在线预览

  1. import { TreeSelect } from "@icedesign/base";
  3. const treeData = [
  4.   {
  5.     label: "服装",
  6.     value: "1",
  7.     children: [
  8.       {
  9.         label: "男装",
  10.         value: "2",
  11.         children: [
  12.           {
  13.             label: "外套",
  14.             value: "4"
  15.           },
  16.           {
  17.             label: "夹克",
  18.             value: "5"
  19.           }
  20.         ]
  21.       },
  22.       {
  23.         label: "女装",
  24.         value: "3",
  25.         children: [
  26.           {
  27.             label: "裙子",
  28.             value: "6"
  29.           }
  30.         ]
  31.       }
  32.     ]
  33.   }
  34. ];
  36. class Demo extends React.Component {
  37.   state = {
  38.     value: ["4", "6"]
  39.   };
  41.   handleChange(value, data) {
  42.     console.log(value, data);
  43.     this.setState({
  44.       value
  45.     });
  46.   }
  48.   render() {
  49.     return (
  50.       <TreeSelect
  51.         treeDefaultExpandAll
  52.         treeCheckable
  53.         autoWidth
  54.         dataSource={treeData}
  55.         value={this.state.value}
  56.         onChange={::this.handleChange}
  57.         style={{ width: 200 }}
  58.       />
  59.     );
  60.   }
  61. }
  63. ReactDOM.render(<Demo />, mountNode);

使用数据直接生成

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

TreeSelect 树型选择控件 - 图4

查看源码在线预览

  1. import { TreeSelect } from "@icedesign/base";
  3. const treeData = [
  4.   {
  5.     label: "服装",
  6.     value: "1",
  7.     selectable: false,
  8.     children: [
  9.       {
  10.         label: "男装",
  11.         value: "2",
  12.         children: [
  13.           {
  14.             label: "外套",
  15.             value: "4"
  16.           },
  17.           {
  18.             label: "夹克",
  19.             value: "5",
  20.             disabled: true
  21.           }
  22.         ]
  23.       },
  24.       {
  25.         label: "女装",
  26.         value: "3",
  27.         children: [
  28.           {
  29.             label: "裙子",
  30.             value: "6"
  31.           }
  32.         ]
  33.       }
  34.     ]
  35.   }
  36. ];
  38. class Demo extends React.Component {
  39.   handleChange(value, data) {
  40.     console.log(value, data);
  41.   }
  43.   render() {
  44.     return (
  45.       <TreeSelect
  46.         treeDefaultExpandAll
  47.         dataSource={treeData}
  48.         onChange={::this.handleChange}
  49.         style={{ width: 200 }}
  50.         autoWidth
  51.       />
  52.     );
  53.   }
  54. }
  56. ReactDOM.render(<Demo />, mountNode);

搜索用法

展示树选择的搜索用法。

TreeSelect 树型选择控件 - 图5

查看源码在线预览

  1. import { TreeSelect } from "@icedesign/base";
  3. const treeData = [
  4.   {
  5.     label: "服装",
  6.     value: "1",
  7.     selectable: false,
  8.     children: [
  9.       {
  10.         label: "男装",
  11.         value: "2",
  12.         children: [
  13.           {
  14.             label: "外套",
  15.             value: "4"
  16.           },
  17.           {
  18.             label: "夹克",
  19.             value: "5",
  20.             disabled: true
  21.           }
  22.         ]
  23.       },
  24.       {
  25.         label: "女装",
  26.         value: "3",
  27.         children: [
  28.           {
  29.             label: "裙子",
  30.             value: "6"
  31.           }
  32.         ]
  33.       }
  34.     ]
  35.   }
  36. ];
  38. class Demo extends React.Component {
  39.   handleChange(value, data) {
  40.     console.log(value, data);
  41.   }
  43.   handleSearch(keyword) {
  44.     console.log(keyword);
  45.   }
  47.   render() {
  48.     return (
  49.       <TreeSelect
  50.         treeDefaultExpandAll
  51.         autoWidth
  52.         showSearch
  53.         dataSource={treeData}
  54.         onChange={::this.handleChange}
  55.         onSearch={::this.handleSearch}
  56.         style={{ width: 200 }}
  57.       />
  58.     );
  59.   }
  60. }
  62. ReactDOM.render(<Demo />, mountNode);

相关区块

TreeSelect 树型选择控件 - 图6

暂无相关区块