Skip to main content

使用树型选择 TreeSelect

简单树状结构​

配置简单的 TreeSelect 只需要 3 步：

  1. 选择数据源。数据源必须是有层级关系信息的，要求子节点行有一个字段记录夫节点行的 ID。
  2. 设置 “根据此字段生成树形结构”。子节点行保存的夫节点 ID 数据。
  3. 设置 “父亲行 ID 字段”。默认子节点保存的夫节点 ID 数据指向的是父亲行的 id 属性，如果不是，可以通过此设置修改。

“根据此字段生成树形结构” 这个字段可以是 Input，也可以是 ACL、Select、TreeSelect。

“父亲行 ID 字段” 这个字段必须是 Input。

例如，如下示例数据对应的的配置为：“根据此字段生成树形结构” 选择字段 parentId (父节点)，“父亲行 ID 字段” 选择 id（ID）。

{
  "results": [
    {
      "id": "0001",
      "name": "The Name 1"
    },
    {
      "id": "0002",
      "name": "The Name 2"
    },
    {
      "id": "0003",
      "name": "Child 1",
      "parentId": "0001"
    },
    {
      "id": "0004",
      "name": "Child 2",
      "parentId": "0001"
    }
  ]
}

tree-select-config

懒加载树状结构​

TreeSelect 支持每次请求只加载当前层的数据，展开节点时再加载次节点的下一层子节点，以此类推。

第一次请求和每次展开节点需要需要后端返回数据如下：

_hasChildren 为 true，表示当前行可以被展开，点击继续请求下一层数据，否则表示当前行是叶子节点。

{
  "results": [
    {
      "id": "0001",
      "name": "The Name 1",
      "_hasChildren": true
    },
    {
      "id": "0002",
      "name": "The Name 2"
    }
  ]
}

当展开 The Name 1 时，返回的数据应该如下：

{
  "results": [
    {
      "id": "0003",
      "name": "Child 1",
      "parentId": "0001"
    },
    {
      "id": "0004",
      "name": "Child 2",
      "parentId": "0001"
    }
  ]
}
tip

目前表单数据源默认不支持此功能，需要流程自定义 API 实现该数据格式。

配置界面如下：

tree-select-config-lazy

图中标注的 3 个配置为必须设置的配置。