TreeSelect 树形选择

使用场景

树形结构的选择器，常用于盒马门店选择（一般是三层结构：商家、子公司、门店），盒马商品类目选择（一级类目、二级类目、三级类目）等场景。

单选与多选

TreeSelect 支持以下两种方式来开启多选模式：

• 设置 multiple={true}
• 使用 <TreeSelect.Multi /> 组件

在 TypeScript 项目中，我们推荐使用组件来切换单选（TreeSelect.Single）和多选（TreeSelect.Multi），类型提示和检查将更准确。

使用说明

示例

基本示例

noInline

const bigTreeDataSource = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2', disabled: true }, { value: '4', label: '动物园' }, { value: 'zoo', label: '阿里动物园', children: [ { value: '盒马', label: '盒马' }, { value: '淘宝', label: '淘宝' }, { value: '天猫', label: '天猫' }, { value: 'foo-4', label: '其他小朋友', children: [ { value: '小红红', label: '小红红' }, { value: '小蓝蓝', label: '小蓝蓝' }, { value: '小灰灰', label: '小灰灰' }, ], }, ], }, { value: '2号动物园', label: '2号动物园', children: [ { value: '小脑虎', label: '小脑虎' }, { value: '小狮子', label: '小狮子' }, { value: '小企鹅', label: '小企鹅' }, { value: 'bar-4', label: '小朋友', children: [ { value: 'bar-4-小红红', label: '小红红' }, { value: 'bar-4-小蓝蓝', label: '小蓝蓝' }, { value: 'bar-4-小灰灰', label: '小灰灰' }, ], }, ], }, ]; function Basic() { const [value, onChange] = useState(''); return <TreeSelect.Single defaultExpandAll onChange={onChange} value={value} dataSource={bigTreeDataSource} />; } render(<Basic />)

const bigTreeDataSource = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2', disabled: true },
  { value: '4', label: '动物园' },
  {
    value: 'zoo',
    label: '阿里动物园',
    children: [
      { value: '盒马', label: '盒马' },
      { value: '淘宝', label: '淘宝' },
      { value: '天猫', label: '天猫' },
      {
        value: 'foo-4',
        label: '其他小朋友',
        children: [
          { value: '小红红', label: '小红红' },
          { value: '小蓝蓝', label: '小蓝蓝' },
          { value: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    value: '2号动物园',
    label: '2号动物园',
    children: [
      { value: '小脑虎', label: '小脑虎' },
      { value: '小狮子', label: '小狮子' },
      { value: '小企鹅', label: '小企鹅' },
      {
        value: 'bar-4',
        label: '小朋友',
        children: [
          { value: 'bar-4-小红红', label: '小红红' },
          { value: 'bar-4-小蓝蓝', label: '小蓝蓝' },
          { value: 'bar-4-小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function Basic() {
  const [value, onChange] = useState('');
  return <TreeSelect.Single defaultExpandAll onChange={onChange} value={value} dataSource={bigTreeDataSource} />;
}

render(<Basic />)

搜索用法

noInline

const bigTreeDataSource = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2', disabled: true }, { value: '4', label: '动物园' }, { value: 'zoo', label: '阿里动物园', children: [ { value: '盒马', label: '盒马' }, { value: '淘宝', label: '淘宝' }, { value: '天猫', label: '天猫' }, { value: 'foo-4', label: '其他小朋友', children: [ { value: '小红红', label: '小红红' }, { value: '小蓝蓝', label: '小蓝蓝' }, { value: '小灰灰', label: '小灰灰' }, ], }, ], }, { value: '2号动物园', label: '2号动物园', children: [ { value: '小脑虎', label: '小脑虎' }, { value: '小狮子', label: '小狮子' }, { value: '小企鹅', label: '小企鹅' }, { value: 'bar-4', label: '小朋友', children: [ { value: 'bar-4-小红红', label: '小红红' }, { value: 'bar-4-小蓝蓝', label: '小蓝蓝' }, { value: 'bar-4-小灰灰', label: '小灰灰' }, ], }, ], }, ]; function ShowSearch() { const [value, onChange] = useState(''); return ( <TreeSelect.Single fill defaultExpandAll showSearch onChange={onChange} value={value} dataSource={bigTreeDataSource} /> ); } render(<ShowSearch />)

const bigTreeDataSource = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2', disabled: true },
  { value: '4', label: '动物园' },
  {
    value: 'zoo',
    label: '阿里动物园',
    children: [
      { value: '盒马', label: '盒马' },
      { value: '淘宝', label: '淘宝' },
      { value: '天猫', label: '天猫' },
      {
        value: 'foo-4',
        label: '其他小朋友',
        children: [
          { value: '小红红', label: '小红红' },
          { value: '小蓝蓝', label: '小蓝蓝' },
          { value: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    value: '2号动物园',
    label: '2号动物园',
    children: [
      { value: '小脑虎', label: '小脑虎' },
      { value: '小狮子', label: '小狮子' },
      { value: '小企鹅', label: '小企鹅' },
      {
        value: 'bar-4',
        label: '小朋友',
        children: [
          { value: 'bar-4-小红红', label: '小红红' },
          { value: 'bar-4-小蓝蓝', label: '小蓝蓝' },
          { value: 'bar-4-小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function ShowSearch() {
  const [value, onChange] = useState('');
  return (
    <TreeSelect.Single
      fill
      defaultExpandAll
      showSearch
      onChange={onChange}
      value={value}
      dataSource={bigTreeDataSource}
    />
  );
}

render(<ShowSearch />)

实践

盒马类目搜索

loading...

inline

// 以下变量从其他模块中引入： // useCateTree, makeRecursiveMapper function HippoCategoryTree() { const cateTree = useCateTree(); const dataSource = (makeRecursiveMapper((item) => ({ ...item, value: item.key }))( cateTree, ) ) ; if (dataSource.length === 0) { return 'loading...'; } return ( <TreeSelect.Single style={{ width: 200 }} popupProps={{ style: { width: 350 } }} dataSource={dataSource} defaultExpandAll showSearch placeholder="请选择一个项目" /> ); }

// 以下变量从其他模块中引入：
//  useCateTree, makeRecursiveMapper

function HippoCategoryTree() {
  const cateTree = useCateTree();

  const dataSource = (makeRecursiveMapper((item) => ({ ...item, value: item.key }))(
    cateTree,
  ) ) ;

  if (dataSource.length === 0) {
    return 'loading...';
  }

  return (
    <TreeSelect.Single
      style={{ width: 200 }}
      popupProps={{ style: { width: 350 } }}
      dataSource={dataSource}
      defaultExpandAll
      showSearch
      placeholder="请选择一个项目"
    />
  );
}

盒马类目多选

loading...

inline

// 以下变量从其他模块中引入： // useCateTree, makeRecursiveMapper function MultiHippoCategoryTree() { const cateTree = useCateTree(); const dataSource = (makeRecursiveMapper((item) => ({ ...item, value: item.key }))( cateTree, ) ) ; const [value, onChange] = useState([]); if (dataSource.length === 0) { return 'loading...'; } return ( <TreeSelect.Multi style={{ width: 300 }} value={value} onChange={onChange} dataSource={dataSource} showSearch placeholder="请选择类目" defaultExpandAll /> ); }

// 以下变量从其他模块中引入：
//  useCateTree, makeRecursiveMapper

function MultiHippoCategoryTree() {
  const cateTree = useCateTree();

  const dataSource = (makeRecursiveMapper((item) => ({ ...item, value: item.key }))(
    cateTree,
  ) ) ;

  const [value, onChange] = useState([]);

  if (dataSource.length === 0) {
    return 'loading...';
  }

  return (
    <TreeSelect.Multi
      style={{ width: 300 }}
      value={value}
      onChange={onChange}
      dataSource={dataSource}
      showSearch
      placeholder="请选择类目"
      defaultExpandAll
    />
  );
}

API

TreeSelect.Multi 和 TreeSelect.Single 的区别：

• value 的类型不同，defaultValue, onChange 的类型也有相应的区别
• 多选额外支持 checkStrictly 和 checkedStrategy，这两个 props 含义详见 Tree 组件文档

字段	描述
defaultValue	string | string[]
value	string | string[]
onChange	(nextValue: string | string[], detail: {}) => void
multiple	boolean
disabled	boolean
dataSource	TreeSelectItem[]
expandedKeys	string[]
onExpand	(nextExpandedKeys: string[], detail: { action: "expand" | "collapse"; key: string; event: MouseEvent<HTMLElement, MouseEvent>; }) => void
defaultExpandAll	boolean
defaultExpandedKeys	string[]
checkStrictly	boolean
checkedStrategy	TreeCheckedStrategy
外观
size	string 选择器尺寸
style	CSSProperties
className	string
placeholder	string 选择器值为空时，trigger 上的占位文本
hasArrow	boolean 是否有下拉箭头
fill	boolean 选择器宽度是否占满容器
shape	"simple" | "solid" 选择器形状
hasClear	boolean 是否有清除按钮
status	"normal" | "error" | "success" | "warning" 选择器状态
containerProps	HTMLAttributes<HTMLDivElement>
弹层
visible	boolean 弹层是否打开
onRequestClose	(reason?: any) => void
defaultVisible	boolean 弹层是否默认打开
onRequestOpen	(reason?: any) => void
autoWidth	boolean = true
autoHeight	boolean = true
autoScrollToFirstItemWhenOpen	boolean = true 选择器弹层被打开时，是否自动滚动到第一个选中的元素
autoCloseAfterSelect	boolean 选择元素时，是否自动关闭弹层。 单选模式下默认为 true，多选模式下默认为 false
popupProps	PopupProps 透传给 Popup 组件的 props
搜索
showSearch	boolean 是否支持搜索功能
searchValue	string 搜索关键字
defaultSearchValue	string 非受控用法，默认的搜索关键字
onSearch	(nextSearchValue: string, detail: { event: any; }) => void 关键字修改回调
notFoundContent	ReactNode 搜索结果为空时的展示内容