好久不见，最近几周用三篇文章详细讲一下：树型选择、级联选择、组织结构选择等相关内容，这是其中的第一篇：TreeSelectionTreeSelection关于树的选择，我们首先要知道它的基本概念。究竟什么是“树”？先来看一下树结构的定义1.树结构：树结构其实是一种层次化的表达。它可以抽象树来表达完整的结构关系。之所以叫树，是因为它更像是一棵倒过来的树，根在上面，枝叶反而变成了向下。同样在树结构的整体命名中，遵循了类似的表达方式：节点（Node）：是树结构中的基本单元，使用节点可以表示不同数据之间的组成关系（从属和并行）关系)通常节点被分为几个特例。根节点：整个树结构的开始称为根节点。树结构必须只有一个根。在思维导图中，根节点代表它的开始，用于扩展更多的树结构。但是，在目前的树选择中，出于易用性的要求，通常会隐藏根节点，只显示子节点。根节点隐藏在标题和选项文本中。子节点：根节点以外的节点称为子节点。树结构中的子节点个数没有具体限制，直接在树选择中显示。叶节点：不与其他子节点相连的节点。叶子节点属于一种特殊的子节点，它是整个树结构的末端节点。它是树选择中的一个重要概念，下面将对此进行扩展。分支（Branch）：节点之间的联系，在我们的树选择中，可以选择分支的线是可见的还是隐藏的。它的使用方式也不同。同时，我们还会用到节点的几个基本概念：节点层级：指当前节点所在的层级，比如根节点是第一层，根的子节点是第二层，等等;节点高度：对于某个节点的高度是该节点下所有叶子节点从上到下的个数；节点深度：指节点到根节点的唯一路径长度，深度与层级相似。树结构在生活中出现在哪里？树形结构对我们有什么用？你可能会觉得理解起来很无聊。我举个例子：回想一下小学时候用字典的场景。首先我们先通过声母确定汉字的大概页码范围，然后通过韵母确定汉字的详细位置，最后通过声调找到我们要找的汉字：其实，字典的设计是典型的树状结构。形结构。在B端系统中，我们常见的公司组织结构、省市县地址选择、在线教育班级结构等，都采用了完整的树形结构。树结构可用于快速结构化表达。目的是让用户可以快速的增删改查。想进一步了解结构化表达的同学推荐看一本??书《金字塔原理》，里面讲了很多逻辑思维和表达的方式和内容，而这种思维其实可以用在我们的工作和生活中。2.树结构的组成：层级缩进：为了完整表达树的整个结构，会使用层级缩进来区分，通常8px用来缩进下一级节点，可以表达更完整的层级。这里需要注意的是，如果想强调树选择的层级关系或者树内容本身比较多，可以参考Coding编辑器的思路，即用“支线”来表达缩进的内容，更明确和清晰。这里使用层级线后，折叠图标也会不一样，下面会解释清楚。折叠图标（节点按钮）：主要显示节点下的所有叶子和子节点。在整个树形结构中，一般有两种折叠图标：三角形折叠和方形折叠。三角折：页面层级较小时使用。因为关卡少，用户不用考虑当前节点在什么位置。方折：多与页面层次线配合使用。通过层级缩进，清晰标示页面层级线，更好的在多层级的情况下进行合理区分。选择控件：整个树形结构仍然在选择输入框架下，分为单选和多选。所以需要展示它的类型，尤其是在多选场景下，一定要标明它的类型，方便用户理解和使用。通常这个控件在单选的时候可以隐藏。在这里，先按下按钮，我会为同学们深入分析和了解选树的种类。optiontext：注意字数限制，超过了怎么处理，我就不过多介绍了。3、树种选择：在说树种选择之前，先给大家讲解一下与之相关的同类型产品。为了方便大家记忆，我选择了两种不同类型的元件进行比较。有兴趣的同学可以关注“CE青年”后台回复树对比查看。我以视频的形式给大家讲解了，相信大家看完后一定有所收获。单选树：单选树只能选择叶子节点，即每棵树都需要展开才能进行选择。是一种比较传统的选型方式，因为它的选型热区小，理解成本高，所以这种方式不符合目前B端产品提高效率的要求，而且要求很特殊，所以使用more的很少，大部分都是单选节点树。单选节点树：单选节点树和单选树最大的区别在于它可以选择子节点，这样子节点和它的各个叶子节点就可以被快速选中。同时，传统的单选节点树采用单选按钮的方式。随着B端需求的不断提升，树的功能越来越复杂后，单选按钮的形式几乎被取消，整个文本标签作为选择热点，用户点击后可以选择。因此在树的选择上，单选节点树逐渐演变为由两部分热区组成的控件：左侧，主要操作是展开和折叠树型，热区通常是图标折叠图标的部分；右边主要是这个选项的选择和节点的操作。热区的范围以整个选项文本为基础，可以扩展。这里给新读者提个醒，这种选择必须在Hover状态下处理，否则用户无法根据光标的变化判断是否可以点击，当然老读者可以略过~Multi-选择节点树：当比较单选和多选的时候你会发现为什么没有多选树？有没有只选选项的多选？是时候再想想了，别忘了往下滑，先想想~虽然理论上会有选择题树，但它的存在价值比较奇怪。首先，在树的节点中，我选择一个子节点，选择该节点下的所有。因此，可以说选择了一个节点；或者说它在节点下选择了多个选项，所以在实际情况中，这样的场景太少了，更多的会被多选节点树代替。当然，多选节点树和单选节点树在结构上是很接近的，就是显示复选框供大家选择。考虑到大家经验不足，建议这里的复选框放在折叠图标前面，原因有二：在后续展开树选择时，经常会遇到选择增加一些操作功能，比如添加、删除、复制、粘贴、拖动排序。我看到很多设计者一开始因为各种原因把选择组件部分放在了背面，导致无法展开进一步的操作，然后就崩溃了，树选择又乱七八糟了~现有的基础设施基本都是他们都按照这样的设计，可以减少前端同学的工作量，也可以减少他BUG的产生。多选节点树的使用场景有很多。我举个例子，大家在选树的时候都会犯错。希望大家能看懂这里面的特殊逻辑：比如在一家大型上市公司，作为老板，我会设置整个“设计部”的权限，想要的效果是任何新员工都会使用这个权限.作为设计新手，很容易用多选节点树来选择整个组织结构，但这样的选择与用户实际想要的有很大的不同。在产品设计中，“设计部”这个概念其实是一个动态数据，就是以后所有加入到“设计部”的员工，我不用去权限管理重新配置。当我们遇到动态数据的情况，首先我们不建议大家采用树选择，因为首先理解这个概念的成本非常高，用户无法通过树选择来理解；建议特殊处理。至于如何处理，大家可以在评论区讨论，我会在后续文章中为大家讲解。树形选择的好处很容易理解：因为树形结构本身已经存在很久了，早在DOS计算机时代就有它的影子。经过长期的发展，用户会相对容易理解和快速浏览：当量特别大时，可以先根据子节点找到自己想要的叶子节点，从而提高选择效率。与《选择录入 02》中提到的Tab选择非常相似。没看过的同学建议先看看。看结构：结构可以帮助人们快速记忆，从而对整体框架有更深入的了解。树的选择正是因为这种结构，可以更方便的让更多的人知道，从而更快的了解业务。选树的常见误区1、数据量首先，对于选树这个控件形式本身，需要分析其能够承载的内容数据量。应该在什么范围比较合适。当数据量过大时，会出现异步加载、数据分页等多种情况，所以在设计时，需要针对此类情况进行设计。2.全选功能全选功能本身比较简单。它只不过是一个复选框。但是由于上面说的数据量大+selectall的存在，所以会出现一些问题需要大家注意。3、键盘映射在树形选择中，可以使用键盘操作，提高效率。基本规则是：↑键：切换兄弟节点；从第一个子节点开始，依次返回到父节点；↓键：向下切换兄弟节点；依次进入扩展后的第一个子节点；←键：关闭当前关卡节点；返回上一层的父节点；→key：展开子节点列表；依次进入已展开的第一个子节点；回车键：提交当前焦点的节点选项；树选择是一种常用的方法，但由于对基本树结构缺乏了解，对其设计存在很多误解。如果大家对选树有什么疑惑，可以在评论区一起讨论哦~
