• TreeSelect 树选择

    树型选择控件。

    何时使用

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

    代码演示

    最简单的用法。
    expand code expand code
    import { TreeSelect } from 'choerodon-ui';
    const TreeNode = TreeSelect.TreeNode;
    
    class Demo extends React.Component {
      state = {
        value: undefined,
      }
    
      onChange = (value) => {
        console.log(arguments);
        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">
                <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);
    
    使用 treeData 把 JSON 数据直接生成树结构。
    expand code expand code
    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',
    }];
    
    class Demo extends React.Component {
      state = {
        value: undefined,
      }
    
      onChange = (value) => {
        console.log(arguments);
        this.setState({ value });
      }
    
      render() {
        return (
          <TreeSelect
            style={{ width: 300 }}
            value={this.state.value}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeData}
            placeholder="Please select"
            treeDefaultExpandAll
            onChange={this.onChange}
          />
        );
      }
    }
    
    ReactDOM.render(<Demo />, mountNode);
    
    多选的树选择。
    expand code expand code
    import { TreeSelect } from 'choerodon-ui';
    const TreeNode = TreeSelect.TreeNode;
    
    class Demo extends React.Component {
      state = {
        value: undefined,
      }
    
      onChange = (value) => {
        console.log(arguments);
        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">
              <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);
    
    使用勾选框实现多选功能。
    expand code expand code
    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',
      }, {
        label: 'Child Node4',
        value: '0-1-1',
        key: '0-1-1',
      }, {
        label: 'Child Node5',
        value: '0-1-2',
        key: '0-1-2',
      }],
    }];
    
    class Demo extends React.Component {
      state = {
        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,
          treeCheckable: true,
          showCheckedStrategy: SHOW_PARENT,
          searchPlaceholder: 'Please select',
          style: {
            width: 300,
          },
        };
        return <TreeSelect {...tProps} />;
      }
    }
    
    ReactDOM.render(<Demo />, mountNode);
    

    API

    Tree props

    参数 说明 类型 默认值
    allowClear 显示清除按钮 boolean false
    defaultValue 指定默认选中的条目 string/string[] -
    disabled 是否禁用 boolean false
    dropdownClassName 下拉菜单的 className 属性 string -
    dropdownMatchSelectWidth 下拉菜单和选择器同宽 boolean true
    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[] } 的格式 boolean false
    loadData 异步加载数据 function(node) -
    multiple 支持多选(当设置 treeCheckable 时自动变为true) boolean false
    placeholder 选择框默认文字 string -
    searchPlaceholder 搜索框默认文字 string -
    showCheckedStrategy 定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点). TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } TreeSelect.SHOW_CHILD
    showSearch 在下拉中显示搜索框(仅在单选模式下生效) boolean false
    size 选择框大小,可选 large small string ‘default’
    treeCheckable 显示 checkbox boolean false
    treeCheckStrictly checkable 状态下节点选择完全受控(父子节点选中状态不再关联),会使得 labelInValue 强制为 true boolean false
    treeData treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(value 在整个树范围内唯一) array<{value, label, children, [disabled, disableCheckbox, selectable]}> []
    treeDataSimpleMode 使用简单格式的 treeData,具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:‘1’, label:“test1”,…},…], pId 是父节点的 id) false|Array<{ id: string, pId: string, rootPId: null }> false
    treeDefaultExpandAll 默认展开所有树节点 boolean false
    treeDefaultExpandedKeys 默认展开的树节点 string[] -
    treeNodeFilterProp 输入项过滤对应的 treeNode 属性 string ‘value’
    treeNodeLabelProp 作为显示的 prop 设置 string ‘title’
    value 指定当前选中的条目 string/string[] -
    onChange 选中树节点时调用此函数 function(value, label, extra) -
    onSearch 文本框值变化时回调 function(value: string) -
    onSelect 被选中时调用 function(value, node, extra) -

    Tree 方法

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

    TreeNode props

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

    参数 说明 类型 默认值
    disableCheckbox 禁掉 checkbox boolean false
    disabled 是否禁用 boolean false
    isLeaf 是否是叶子节点 boolean false
    key 此项必须设置(其值在整个树范围内唯一) string -
    title 树节点显示的内容 string|ReactNode ’—’
    value 默认根据此属性值进行筛选(其值在整个树范围内唯一) string -