NestedSelect 级联选择器

基本用法

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “nested-select”, “name”: “nestedSelect”, “label”: “级联选择器”, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] } ] }

  2. ## 动态选项
  4. 通过 source 可以从上下文或 api 中获取选项信息，比如
  6. ```schema: scope="body"
  7. {
  8.   "type": "page",
  9.   "data": {
  10.     "options": [
  11.         {
  12.           "label": "A",
  13.           "value": "a"
  14.         },
  15.         {
  16.           "label": "B",
  17.           "value": "b",
  18.           "children": [
  19.             {
  20.               "label": "B-1",
  21.               "value": "b-1"
  22.             },
  23.             {
  24.               "label": "B-2",
  25.               "value": "b-2"
  26.             },
  27.             {
  28.               "label": "B-3",
  29.               "value": "b-3"
  30.             }
  31.           ]
  32.         },
  33.         {
  34.           "label": "C",
  35.           "value": "c"
  36.         }
  37.       ]
  38.   },
  39.   "body": {
  40.     "type": "form",
  41.     "api": "/api/mock2/form/saveForm",
  42.     "body": [
  43.       {
  44.         "type": "nested-select",
  45.         "name": "nestedSelect",
  46.         "label": "级联选择器",
  47.         "source": "${options}"
  48.       }
  49.     ]
  50.   }
  51. }

也可以是 api 地址

```schema: scope=”body” { “type”: “page”, “body”: { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “nested-select”, “name”: “nestedSelect”, “label”: “级联选择器”, “source”: “/api/mock2/form/getTreeOptions” } ] } }

  2. ## 只允许选中叶子节点
  4. > 1.8.0 及以上版本，如果是之前版本可以在对应的节点上不设置 value 实现
  6. 在单选时，可以通过 `onlyLeaf` 来设置只允许选择叶子节点，即便分支节点有 `value` 也不会被选中。
  8. ```schema: scope="body"
  9. {
  10.   "type": "form",
  11.   "api": "/api/mock2/form/saveForm",
  12.   "body": [
  13.     {
  14.       "type": "nested-select",
  15.       "name": "nestedSelect",
  16.       "label": "级联选择器",
  17.       "onlyLeaf": true,
  18.       "options": [
  19.         {
  20.           "label": "A",
  21.           "value": "a"
  22.         },
  23.         {
  24.           "label": "B",
  25.           "value": "b",
  26.           "children": [
  27.             {
  28.               "label": "B-1",
  29.               "value": "b-1"
  30.             },
  31.             {
  32.               "label": "B-2",
  33.               "value": "b-2"
  34.             },
  35.             {
  36.               "label": "B-3",
  37.               "value": "b-3"
  38.             }
  39.           ]
  40.         },
  41.         {
  42.           "label": "C",
  43.           "value": "c"
  44.         }
  45.       ]
  46.     }
  47.   ]
  48. }

在多选时，也可以通过 onlyLeaf 来设置只允许选择叶子节点，即便分支节点有 value 也不会有选中动作。

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “nested-select”, “name”: “nestedSelect”, “label”: “级联选择器”, “onlyLeaf”: true, “multiple”: true, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] } ] }

  2. ## 选中父节点是否自动选中子节点
  4. 默认选中父节点会自动选中子节点，可以设置`"cascade": true`，不自动选中子节点
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "debug": true,
  10.   "api": "/api/mock2/form/saveForm",
  11.   "body": [
  12.     {
  13.       "type": "nested-select",
  14.       "name": "nestedSelect1",
  15.       "label": "默认自动选中子节点",
  16.       "multiple": true,
  17.       "options": [
  18.         {
  19.           "label": "A",
  20.           "value": "a"
  21.         },
  22.         {
  23.           "label": "B",
  24.           "value": "b",
  25.           "children": [
  26.             {
  27.               "label": "B-1",
  28.               "value": "b-1"
  29.             },
  30.             {
  31.               "label": "B-2",
  32.               "value": "b-2"
  33.             },
  34.             {
  35.               "label": "B-3",
  36.               "value": "b-3"
  37.             }
  38.           ]
  39.         },
  40.         {
  41.           "label": "C",
  42.           "value": "c"
  43.         }
  44.       ]
  45.     },
  46.     {
  47.         "type": "divider"
  48.     },
  49.     {
  50.       "type": "nested-select",
  51.       "name": "nestedSelect2",
  52.       "label": "不自动选中子节点",
  53.       "multiple": true,
  54.       "cascade": true,
  55.       "options": [
  56.         {
  57.           "label": "A",
  58.           "value": "a"
  59.         },
  60.         {
  61.           "label": "B",
  62.           "value": "b",
  63.           "children": [
  64.             {
  65.               "label": "B-1",
  66.               "value": "b-1"
  67.             },
  68.             {
  69.               "label": "B-2",
  70.               "value": "b-2"
  71.             },
  72.             {
  73.               "label": "B-3",
  74.               "value": "b-3"
  75.             }
  76.           ]
  77.         },
  78.         {
  79.           "label": "C",
  80.           "value": "c"
  81.         }
  82.       ]
  83.     }
  84.   ]
  85. }

选中父节点，值是否包含子节点

默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置"withChildren": true

```schema: scope=”body” { “type”: “form”, “debug”: true, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “nested-select”, “name”: “nestedSelect1”, “label”: “默认不自动带上子节点的值”, “multiple”: true, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] }, { “type”: “divider” }, { “type”: “nested-select”, “name”: “nestedSelect2”, “label”: “自动带上子节点的值”, “multiple”: true, “withChildren”: true, “options”: [ { “label”: “A”, “value”: “a” }, { “label”: “B”, “value”: “b”, “children”: [ { “label”: “B-1”, “value”: “b-1” }, { “label”: “B-2”, “value”: “b-2” }, { “label”: “B-3”, “value”: “b-3” } ] }, { “label”: “C”, “value”: “c” } ] } ] }

  2. 也可以设置`onlyChildren`，实现只包含子节点的值
  4. ```schema: scope="body"
  5. {
  6.   "type": "form",
  7.   "debug": true,
  8.   "api": "/api/mock2/form/saveForm",
  9.   "body": [
  10.     {
  11.       "type": "nested-select",
  12.       "name": "nestedSelect1",
  13.       "label": "默认不自动带上子节点的值",
  14.       "multiple": true,
  15.       "options": [
  16.         {
  17.           "label": "A",
  18.           "value": "a"
  19.         },
  20.         {
  21.           "label": "B",
  22.           "value": "b",
  23.           "children": [
  24.             {
  25.               "label": "B-1",
  26.               "value": "b-1",
  27.               "children": [
  28.                 {
  29.                   "label": "D-1",
  30.                   "value": "d-1"
  31.                 },
  32.                 {
  33.                   "label": "D-2",
  34.                   "value": "d-2"
  35.                 },
  36.                 {
  37.                   "label": "D-3",
  38.                   "value": "d-3"
  39.                 }
  40.               ]
  41.             },
  42.             {
  43.               "label": "B-2",
  44.               "value": "b-2"
  45.             },
  46.             {
  47.               "label": "B-3",
  48.               "value": "b-3"
  49.             }
  50.           ]
  51.         },
  52.         {
  53.           "label": "C",
  54.           "value": "c"
  55.         }
  56.       ]
  57.     },
  58.     {
  59.         "type": "divider"
  60.     },
  61.      {
  62.       "type": "nested-select",
  63.       "name": "nestedSelect2",
  64.       "label": "只包含子节点的值",
  65.       "multiple": true,
  66.       "onlyChildren": true,
  67.       "clearable": true,
  68.       "options": [
  69.         {
  70.           "label": "A",
  71.           "value": "a"
  72.         },
  73.         {
  74.           "label": "B",
  75.           "value": "b",
  76.           "children": [
  77.             {
  78.               "label": "B-1",
  79.               "value": "b-1",
  80.               "children": [
  81.                 {
  82.                   "label": "D-1",
  83.                   "value": "d-1"
  84.                 },
  85.                 {
  86.                   "label": "D-2",
  87.                   "value": "d-2"
  88.                 },
  89.                 {
  90.                   "label": "D-3",
  91.                   "value": "d-3"
  92.                 }
  93.               ]
  94.             },
  95.             {
  96.               "label": "B-2",
  97.               "value": "b-2"
  98.             },
  99.             {
  100.               "label": "B-3",
  101.               "value": "b-3"
  102.             }
  103.           ]
  104.         },
  105.         {
  106.           "label": "C",
  107.           "value": "c"
  108.         }
  109.       ]
  110.     }
  111.   ]
  112. }

仅展示选中节点文本信息

设置hideNodePathLabel: true，可以隐藏选择框中已选择节点的祖先节点(ancestor)的labelField字段值，仅展示当前选中节点的labelField字段值。

schema: scope="body" { "type": "form", "api": "/api/mock2/form/saveForm", "body": [ { "type": "nested-select", "name": "nestedSelect", "label": "展示已选择节点的祖先节点的文本信息", "value": "a,b-1,b-3", "multiple": true, "options": [ { "label": "A", "value": "a" }, { "label": "B", "value": "b", "children": [ { "label": "B-1", "value": "b-1" }, { "label": "B-2", "value": "b-2" }, { "label": "B-3", "value": "b-3" } ] }, { "label": "C", "value": "c" } ], }, { "type": "divider" }, { "type": "nested-select", "name": "nestedSelect2", "label": "仅展示已选择节点的文本信息", "value": "a,b-1,b-3", "multiple": true, "cascade": true, "hideNodePathLabel": true, "options": [ { "label": "A", "value": "a" }, { "label": "B", "value": "b", "children": [ { "label": "B-1", "value": "b-1" }, { "label": "B-2", "value": "b-2" }, { "label": "B-3", "value": "b-3" } ] }, { "label": "C", "value": "c" } ] } ] }

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名 类型 默认值 说明
options Array<object>或Array<string> 选项组
source string或 API 动态选项组
delimiter boolean false 拼接符
labelField boolean "label" 选项标签字段
valueField boolean "value" 选项值字段
joinValues boolean true 拼接值
extractValue boolean false 提取值
autoFill object 自动填充
cascade boolean false 设置 true时，当选中父节点时不自动选择子节点。
withChildren boolean false 设置 true时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。
onlyChildren boolean false 多选时，选中父节点时，是否只将其子节点加入到值中。
searchable boolean false 可否搜索
searchPromptText string "输入内容进行检索" 搜索框占位文本
noResultsText string "未找到任何结果" 无结果时的文本
multiple boolean false 可否多选
hideNodePathLabel boolean false 是否隐藏选择框中已选择节点的路径 label 信息
onlyLeaf boolean false 只允许选择叶子节点

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
change event.data.value: string 选中值 选中值变化时触发
blur event.data.value: string 选中值 输入框失去焦点时触发
focus event.data.value: string 选中值 输入框获取焦点时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue，若没有配置resetValue，则清空
reload - 重新加载，调用 source，刷新数据域数据刷新（重新加载）
setValue value: string 更新的值 更新数据，开启multiple时，多个值用,分隔