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;

遇到的问题及解决方法

如果你在实现多树选择时遇到了问题，例如无法正确区分标签和标题，可能是因为数据结构设计不当或者在渲染时没有正确使用这些字段。

问题：节点显示不正确，无法区分标签和标题。

原因：可能是在渲染节点时没有正确使用title和自定义的label字段。

解决方法：确保在渲染节点时使用了正确的字段，如上面的示例代码所示。

参考链接

• Ant Design Tree组件文档

请注意，以上代码和信息是基于Antd的通用知识，具体实现可能需要根据你的应用场景进行调整。如果需要更多高级功能或者遇到特定的技术难题，可以参考Antd的官方文档或者在社区寻求帮助。