Antd tree多树选择区分标签和标题

Ant Design（简称Antd）是一个流行的React UI库，提供了丰富的组件来帮助开发者快速构建用户界面。其中，Tree组件用于展示树形结构的数据，支持多选功能。在多树选择场景中，区分标签（label）和标题（title）通常是为了更好地展示和管理数据。

基础概念

Label：通常是指显示在界面上的文本，用于标识某个元素。
Title：通常是指一个元素的详细名称或者描述，可能包含更多的信息。

在Antd的Tree组件中，每个节点可以有一个title属性，用于显示节点的文本。如果你想要区分标签和标题，可以在节点数据中添加一个额外的字段来存储标签信息。

类型

Antd Tree组件的多选模式可以通过设置multiple属性来开启。在这种模式下，用户可以通过点击复选框来选择多个节点。

应用场景

多树选择功能常用于需要从多层次数据结构中选择多个项目的场景，例如文件管理、组织架构选择、权限管理等。

示例代码

以下是一个简单的Antd Tree组件示例，展示了如何区分标签和标题，并启用多选模式：

import React from 'react';
import { Tree } from 'antd';

const treeData = [
  {
    title: 'Parent Node',
    key: 'parent',
    children: [
      {
        title: 'Child Node 1',
        key: 'child1',
        label: 'Label for Child 1', // 自定义标签字段
      },
      {
        title: 'Child Node 2',
        key: 'child2',
        label: 'Label for Child 2', // 自定义标签字段
      },
    ],
  },
];

const Demo = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  return (
    <Tree
      multiple
      showLine
      defaultExpandedKeys={['parent']}
      onSelect={onSelect}
      treeData={treeData}
    />
  );
};

export default Demo;