TreeSelect 树选择

树型选择控件。

何时使用#

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

API#

Tree props#

参数 说明 类型 默认值
value 指定当前选中的条目 string/Array 无
defaultValue 指定默认选中的条目 string/Array 无
multiple 支持多选 boolean false
tags 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 boolean false
onSelect 被选中时调用，参数为选中项的 value 值 function(value) 无
onChange 选中option，或input的value变化(combobox 模式下)时，调用此函数 function(value, label) 无
allowClear 显示清除按钮 boolean false
onSearch 文本框值变化时回调 function(value: String)
placeholder 选择框默认文字 string 无
searchPlaceholder 搜索框默认文字 string 无
dropdownMatchSelectWidth 下拉菜单和选择器同宽 boolean true
combobox 输入框自动提示模式 boolean false
size 选择框大小，可选 large small String default
showSearch 在下拉中显示搜索框 boolean false
disabled 是否禁用 boolean false
treeDefaultExpandAll 默认展开所有树节点 bool false
treeCheckable 显示checkbox bool false
filterTreeNode 是否根据输入项进行筛选，返回值true function(treeNode) -
treeNodeFilterProp 输入项过滤对应的 treeNode 属性 String 'value'
treeNodeLabelProp 作为显示的prop设置 String 'title'
treeData treeNodes数据，如果设置则不需要手动构造TreeNode节点（如果value在整个树范围内不唯一，需要设置key其值为整个树范围内的唯一id array<{value, label, children}> []
loadData 异步加载数据 function(node) -

TreeNode props#

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

参数 说明 类型 默认值
disabled 是否禁用 Boolean false
key 此项必须设置（其值在整个树范围内唯一） String -
value 默认根据此属性值进行筛选 String -
title 树节点显示的内容 String '---'
isLeaf 是否是叶子节点 bool false

代码演示 

import { TreeSelect } from 'antd';
const TreeNode = TreeSelect.TreeNode;

const Demo = React.createClass({
  getInitialState() {
    return {
      value: '',
    };
  },
  onChange(value) {
    console.log(arguments);
    this.setState({ value });
  },
  render() {
    return (
      <TreeSelect style={{ width: 300 }}
        value={this.state.value}
        dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="请选择"
        allowClear
        treeDefaultExpandAll
        onChange={this.onChange}>
        <TreeNode value="parent 1" title="parent 1" key="0-1">
          <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
            <TreeNode value="leaf1" title="my leaf" key="random" />
            <TreeNode value="leaf2" title="your leaf" key="random1" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    );
  },
});

ReactDOM.render(<Demo />, mountNode);
基本

最简单的用法。

import { TreeSelect } from 'antd';

const treeData = [{
  label: '节点一',
  value: '0-0',
  key: '0-0',
  children: [{
    label: '子节点一',
    value: '0-0-0',
    key: '0-0-0',
  }, {
    label: '子节点二',
    value: '0-0-1',
    key: '0-0-1',
  }],
}, {
  label: '节点二',
  value: '0-1',
  key: '0-1',
  children: [{
    label: '子节点三',
    value: '0-1-0',
    key: '0-1-0',
  }, {
    label: '子节点四',
    value: '0-1-1',
    key: '0-1-1',
  }],
}];

const Demo = React.createClass({
  getInitialState() {
    return {
      value: ['0-0-0'],
    };
  },
  onChange(value) {
    console.log('onChange ', value, arguments);
    this.setState({ value });
  },
  render() {
    const tProps = {
      treeData,
      value: this.state.value,
      onChange: this.onChange,
      multiple: true,
      treeCheckable: true,
      searchPlaceholder: '请选择',
      treeDefaultExpandAll: true,
      style: {
        width: 300,
      },
    };
    return <TreeSelect {...tProps} />;
  },
});

ReactDOM.render(<Demo />, mountNode);
多选

多选和勾选框功能。

import { TreeSelect } from 'antd';

const treeData = [{
  label: '节点一',
  value: '0-0',
  key: '0-0',
  children: [{
    label: '子节点一',
    value: '0-0-1',
    key: '0-0-1',
  }, {
    label: '子节点二',
    value: '0-0-2',
    key: '0-0-2',
  }],
}, {
  label: '节点二',
  value: '0-1',
  key: '0-1',
}];

const Demo = React.createClass({
  getInitialState() {
    return {
      value: '',
    };
  },
  onChange(value) {
    console.log(arguments);
    this.setState({ value });
  },
  render() {
    return (
      <TreeSelect style={{ width: 300 }}
        value={this.state.value}
        dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
        treeData={treeData}
        placeholder="请选择"
        treeDefaultExpandAll
        onChange={this.onChange} />
    );
  },
});

ReactDOM.render(<Demo />, mountNode);
从数据直接生成

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