跳到主要内容

树形选择框

选项值有子项，有层级，可展开的 Select 下拉框组件。

image-20240905094125444

何时使用​

  • 类似 Select 下拉框的选择组件
  • 加载有嵌套的数据结构，可下拉选择子项，例如部门层级、分类目录等

一、属性​

1. 数据源​

image-20250625093026811

树形选择器提供了接口绑定、数据绑定、模型绑定三种数据绑定方式。具体的数据绑定方式详见 数据绑定。

2. 数据​

image-20250625095902995

选项名称 & 选项值： 选项名称是展示在页面上的内容，选项值是发送请求时，发送给后端的数据。

选项子项 & 父级 id：

树形选择框要展示树形结构，选项子项就类似于文件夹下面的子文件夹，一般绑定为对象，与父对象结构要一致。设置父级 id 之后，如果 A 的 id 是 1，B 的父级 id 是 1，那么 A 的展开项下面就有 B。

⚠️ 注意：父级 id 和 选项子项 只能选择开启其中一个。

父级 id 的示例：

image-20250625101352586

数据绑定： 树形选择框的数据绑定方式详见 数据绑定。

初始值： 设置树形选择框初始选中的值，可以配置为手动赋值和视图参数两种方式。

3. 功能​

image-20250625102715836

占位提示： 选择数据之前下拉框内显示的文字，可以起到提示用户的作用。

可搜索： 开启之后，树形选择框可以输入内容，根据输入字符匹配搜索选项。

image-20240905111442947

可勾选： 使用勾选框实现多选功能。开启可勾选后，可选择回填方式：

image-20240905105925155
image-20250625130638818

  • 子级：默认。只回填子项，不回填父母项
    image-20240905110536797

  • 父级：只回填父母项，不回填子项
    image-20240905110434051

  • 所有：回填父母项和子项
    image-20240905110645127

多选 & 最多个数： 开启多选之后，选项可选择多个。且设置最大长度可以配置已选择选项的标签最多包含的 Tag，超出则用 ... 省略。

image-20240905111245554

默认展开： 默认所有子项都展开。

虚拟滚动： 配合容器使用，如果树的高度比容器的高度要高时，可以将虚拟滚动打开，达到滚动效果。

支持清除： 如果树形选择框选择了数据，则可以显示清除按钮，清除所有已选。

image-20250625132714787

4. 外观​

image-20250625131442840

尺寸： 分小、中、大三种，默认中型尺寸大小。

image-20250625132256983

滚动高度： 下拉展开弹窗的滚动高度。

自适应： 下拉菜单和选择器宽度一致。

连接线： 开启后，同级选项有纵向连接线连接。

image-20240905105119816

5. 状态​

image-20250625132423907

禁用： 设置为不可选中的状态。

隐藏： 设置为隐藏的状态。

二、样式​

无特殊样式，详见 通用样式。

三、常见使用场景​

  1. 选择省份、城市等有层次的数据

image-20250625131636995