mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:28:37 +08:00
17 KiB
Executable File
17 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Tree 树形选择框 | 0 | null | Tree 树形选择框 | 59 |
基本使用
配置的options
中,可以通过children
字段进行嵌套展示,实现树形选择器
{
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "tree",
"name": "tree",
"label": "Tree",
"options": [
{
"label": "Folder A",
"value": 1,
"children": [
{
"label": "file A",
"value": 2
},
{
"label": "file B",
"value": 3
}
]
},
{
"label": "file C",
"value": 4
},
{
"label": "file D",
"value": 5
}
]
}
]
}
选择器样式
配置"type": "tree-select"
可以实现选择器样式
{
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "tree-select",
"name": "tree",
"label": "Tree",
"options": [
{
"label": "Folder A",
"value": 1,
"children": [
{
"label": "file A",
"value": 2
},
{
"label": "file B",
"value": 3
}
]
},
{
"label": "file C",
"value": 4
},
{
"label": "file D",
"value": 5
}
]
}
]
}
选中父节点是否自动选中子节点
默认选中父节点会自动选中子节点,可以设置"cascade": true
,不自动选中子节点
{
"type": "form",
"debug": true,
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "tree",
"name": "tree1",
"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": "tree",
"name": "tree2",
"label": "不自动选中子节点",
"multiple": true,
"cascade": 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"
}
]
}
]
}
选中父节点,值是否包含子节点
默认选中父节点,是不会带上子节点的值,想要自动带上子节点的值,那么配置"withChildren": true
{
"type": "form",
"debug": true,
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "tree",
"name": "tree1",
"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": "tree",
"name": "tree2",
"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"
}
]
}
]
}
也可以设置onlyChildren
,实现只包含子节点的值
{
"type": "form",
"debug": true,
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "tree",
"name": "tree1",
"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": "tree",
"name": "tree2",
"label": "只包含子节点的值",
"multiple": true,
"onlyChildren": 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"
}
]
}
]
}
默认展开
默认是展开所有子节点的,如果不想默认展开,则配置"initiallyOpen": false
{
"type": "form",
"debug": true,
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "tree",
"name": "tree1",
"label": "默认不自动带上子节点的值",
"initiallyOpen": false,
"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"
}
]
}
]
}
如果层级较多,也可以配置unfoldedLevel
指定展开的层级数。
下例中设置"unfoldedLevel": 1
,默认展开第 1 层
{
"type": "form",
"debug": true,
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "tree",
"name": "tree1",
"label": "默认不自动带上子节点的值",
"initiallyOpen": false,
"unfoldedLevel": 1,
"options": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b",
"children": [
{
"label": "B-1",
"value": "b-1"
},
{
"label": "B-2",
"value": "b-2",
"children": [
{
"label": "B-2-1",
"value": "b-2-1"
},
{
"label": "B-2-2",
"value": "b-2-2"
},
{
"label": "B-2-3",
"value": "b-2-3"
}
]
},
{
"label": "B-3",
"value": "b-3"
}
]
},
{
"label": "C",
"value": "c"
}
]
}
]
}
可编辑
配置 creatable
、removable
和 editable
可以实现树可编辑。
{
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "tree",
"name": "tree",
"label": "Tree",
"creatable": true,
"removable": true,
"editable": true,
"options": [
{
"label": "Folder A",
"value": 1,
"children": [
{
"label": "file A",
"value": 2
},
{
"label": "file B",
"value": 3
}
]
},
{
"label": "file C",
"value": 4
},
{
"label": "file D",
"value": 5
}
]
}
]
}
属性表
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
options | Array<object> 或Array<string> |
选项组 | |
source | string 或 API |
动态选项组 | |
autoComplete | API | 自动提示补全 | |
multiple | boolean |
false |
是否多选 |
delimeter | string |
false |
拼接符 |
labelField | string |
"label" |
选项标签字段 |
valueField | string |
"value" |
选项值字段 |
joinValues | boolean |
true |
拼接值 |
extractValue | boolean |
false |
提取值 |
creatable | boolean |
false |
新增选项 |
addControls | Array<表单项> | 自定义新增表单项 | |
addApi | API | 配置新增选项接口 | |
editable | boolean |
false |
编辑选项 |
editControls | Array<表单项> | 自定义编辑表单项 | |
editApi | API | 配置编辑选项接口 | |
removable | boolean |
false |
删除选项 |
deleteApi | API | 配置删除选项接口 | |
searchable | boolean |
false |
是否可检索,仅在 type 为 tree-select 的时候生效 |
hideRoot | boolean |
true |
如果想要显示个顶级节点,请设置为 false |
rootLabel | boolean |
"顶级" |
当 hideRoot 不为 false 时有用,用来设置顶级节点的文字。 |
showIcon | boolean |
true |
是否显示图标 |
showRadio | boolean |
false |
是否显示单选按钮,multiple 为 false 是有效。 |
initiallyOpen | boolean |
true |
设置是否默认展开所有层级。 |
unfoldedLevel | number |
0 |
设置默认展开的级数,只有initiallyOpen 不是true 时生效。 |
cascade | boolean |
false |
当选中父节点时不自动选择子节点。 |
withChildren | boolean |
false |
选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。 |
onlyChildren | boolean |
false |
多选时,选中父节点时,是否只将其子节点加入到值中。 |
rootCreatable | boolean |
false |
是否可以创建顶级节点 |
rootCreateTip | string |
"添加一级节点" |
创建顶级节点的悬浮提示 |
minLength | number |
最少选中的节点数 | |
maxLength | number |
最多选中的节点数 |