TreeSelect 树选择

树型选择控件。

何时使用

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

代码演示

基本

最简单的用法。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { TreeSelect } from 'choerodon-ui';
​
const TreeNode = TreeSelect.TreeNode;
​
class Demo extends React.Component {
  state = {
    value: undefined,
  };
​
  onChange = value => {
    this.setState({ value });
  };
​
  render() {
    return (
      <TreeSelect
        showSearch
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        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">

多选

多选的树选择。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { TreeSelect } from 'choerodon-ui';
​
const TreeNode = TreeSelect.TreeNode;
​
class Demo extends React.Component {
  state = {
    value: undefined,
  };
​
  onChange = value => {
    this.setState({ value });
  };
​
  render() {
    return (
      <TreeSelect
        showSearch
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        allowClear
        multiple
        treeDefaultExpandAll
        onChange={this.onChange}
      >
        <TreeNode value="parent 1" title="parent 1" key="0-1">

从数据直接生成

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { TreeSelect } from 'choerodon-ui';
​
const treeData = [
  {
    label: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        label: 'Child Node1',
        value: '0-0-1',
        key: '0-0-1',
      },
      {
        label: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    label: 'Node2',
    value: '0-1',
    key: '0-1',
  },
];
​

可勾选

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { TreeSelect } from 'choerodon-ui';
​
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
​
const treeData = [
  {
    label: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        label: 'Child Node1',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    label: 'Node2',
    value: '0-1',
    key: '0-1',
    children: [
      {
        label: 'Child Node3',
        value: '0-1-0',
        key: '0-1-0',
      },

API

Tree props

Tree 方法

TreeNode props

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