test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-05 05:18:34 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity
175f0d72b1
amis/docs/zh-CN/components/form/picker.md

513 lines
17 KiB
Markdown
Raw Normal View History

文档加上去了
2020-07-28 10:03:53 +08:00
---
title: Picker 列表选择器
修复路径
2020-07-29 16:20:21 +08:00
description:
文档加上去了
2020-07-28 10:03:53 +08:00
type: 0
group: null
menuName: Picker
修复路径
2020-07-29 16:20:21 +08:00
icon:
文档加上去了
2020-07-28 10:03:53 +08:00
order: 35
---
修复路径
2020-07-29 16:20:21 +08:00
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
列表选取，在功能上和 Select 类似，但它能显示更复杂的信息。
文档加上去了
2020-07-28 10:03:53 +08:00
## 基本用法
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
默认和 Select 很像，但请看后面的 pickerSchema 设置。
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "form",
docs: 将 cfc 的 mock 接口放到项目中支持文档离线访问；将大部分图片外联都放入项目中管理 (#2366)
2021-08-09 18:05:01 +08:00
"api": "/api/mock2/form/saveForm",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "picker",
"name": "picker",
"label": "picker",
"options": [
{
"label":"A",
"value":"a"
},
{
"label":"B",
"value":"b"
},
{
"label":"C",
"value":"c"
}
]
}
]
}
```
## 配置 pickerSchema
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
可以配置 pickerSchema，实现弹框 crud 选择模式，更多 crud 配置可查看 crud 文档，选择之后最终的值通过 `valueField` 来设置。
文档加上去了
2020-07-28 10:03:53 +08:00
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "form",
docs: 将 cfc 的 mock 接口放到项目中支持文档离线访问；将大部分图片外联都放入项目中管理 (#2366)
2021-08-09 18:05:01 +08:00
"api": "/api/mock2/form/saveForm",
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
"debug": true,
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "picker",
"name": "type4",
"joinValues": true,
"valueField": "id",
"labelField": "engine",
"label": "多选",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"source": "/api/mock2/sample",
文档加上去了
2020-07-28 10:03:53 +08:00
"size": "lg",
"value": "4,5",
"multiple": true,
"pickerSchema": {
"mode": "table",
"name": "thelist",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"quickSaveApi": "/api/mock2/sample/bulkUpdate",
"quickSaveItemApi": "/api/mock2/sample/$id",
文档加上去了
2020-07-28 10:03:53 +08:00
"draggable": true,
"headerToolbar": {
"wrapWithPanel": false,
"type": "form",
"className": "text-right",
"target": "thelist",
"mode": "inline",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "keywords",
"addOn": {
"type": "submit",
"label": "搜索",
"level": "primary",
"icon": "fa fa-search pull-left"
}
}
]
},
"columns": [
{
"name": "engine",
"label": "Rendering engine",
"sortable": true,
"searchable": true,
"type": "text",
"toggled": true
},
{
"name": "browser",
"label": "Browser",
"sortable": true,
"type": "text",
"toggled": true
},
{
"name": "platform",
"label": "Platform(s)",
"sortable": true,
"type": "text",
"toggled": true
},
{
"name": "version",
"label": "Engine version",
"quickEdit": true,
"type": "text",
"toggled": true
},
{
"name": "grade",
"label": "CSS grade",
"quickEdit": {
"mode": "inline",
"type": "select",
"options": ["A", "B", "C", "D", "X"],
"saveImmediately": true
},
"type": "text",
"toggled": true
},
{
"type": "operation",
"label": "操作",
"width": 100,
"buttons": [
{
"type": "button",
"icon": "fa fa-eye",
"actionType": "dialog",
"dialog": {
"title": "查看",
"body": {
"type": "form",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "static",
"name": "engine",
"label": "Engine"
},
{
"type": "divider"
},
{
"type": "static",
"name": "browser",
"label": "Browser"
},
{
"type": "divider"
},
{
"type": "static",
"name": "platform",
"label": "Platform(s)"
},
{
"type": "divider"
},
{
"type": "static",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "static",
"name": "grade",
"label": "CSS grade"
},
{
"type": "divider"
},
{
"type": "html",
"html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
}
]
}
}
},
{
"type": "button",
"icon": "fa fa-pencil",
"actionType": "dialog",
"dialog": {
"position": "left",
"size": "lg",
"title": "编辑",
"body": {
"type": "form",
"name": "sample-edit-form",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"api": "/api/mock2/sample/$id",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "engine",
"label": "Engine",
"required": true
},
{
"type": "divider"
},
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "browser",
"label": "Browser",
"required": true
},
{
"type": "divider"
},
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "platform",
"label": "Platform(s)",
"required": true
},
{
"type": "divider"
},
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "select",
"name": "grade",
"label": "CSS grade",
"options": ["A", "B", "C", "D", "X"]
}
]
}
}
},
{
"type": "button",
"icon": "fa fa-times text-danger",
"actionType": "ajax",
"confirmText": "您确认要删除?",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"api": "delete:/api/mock2/sample/$id"
文档加上去了
2020-07-28 10:03:53 +08:00
}
],
"toggled": true
}
]
}
}
]
}
```
## 内嵌模式
修复路径
2020-07-29 16:20:21 +08:00
可以配置`"embed": true`，实现内嵌 picker
文档加上去了
2020-07-28 10:03:53 +08:00
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "form",
docs: 将 cfc 的 mock 接口放到项目中支持文档离线访问；将大部分图片外联都放入项目中管理 (#2366)
2021-08-09 18:05:01 +08:00
"api": "/api/mock2/form/saveForm",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "picker",
"name": "type4",
"joinValues": true,
"valueField": "id",
"labelField": "engine",
"label": "Picker",
"embed": true,
fix: Table数据源为tree结构时勾选错误问题 (#2989) Co-authored-by: lurunze1226 <lurunze@baidu.com>
2021-11-18 18:58:06 +08:00
"source": "/api/mock2/crud/tree?waitSeconds=1",
文档加上去了
2020-07-28 10:03:53 +08:00
"size": "lg",
"value": "4,5",
"multiple": true,
"pickerSchema": {
"mode": "table",
"name": "thelist",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"quickSaveApi": "/api/mock2/sample/bulkUpdate",
"quickSaveItemApi": "/api/mock2/sample/$id",
文档加上去了
2020-07-28 10:03:53 +08:00
"draggable": true,
"headerToolbar": {
"wrapWithPanel": false,
"type": "form",
"className": "text-right",
"target": "thelist",
"mode": "inline",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "keywords",
"addOn": {
"type": "submit",
"label": "搜索",
"level": "primary",
"icon": "fa fa-search pull-left"
}
}
]
},
"columns": [
{
"name": "engine",
"label": "Rendering engine",
"sortable": true,
"searchable": true,
"type": "text",
"toggled": true
},
{
"name": "browser",
"label": "Browser",
"sortable": true,
"type": "text",
"toggled": true
},
{
"name": "platform",
"label": "Platform(s)",
"sortable": true,
"type": "text",
"toggled": true
},
{
"name": "version",
"label": "Engine version",
"quickEdit": true,
"type": "text",
"toggled": true
},
{
"name": "grade",
"label": "CSS grade",
"quickEdit": {
"mode": "inline",
"type": "select",
"options": ["A", "B", "C", "D", "X"],
"saveImmediately": true
},
"type": "text",
"toggled": true
},
{
"type": "operation",
"label": "操作",
"width": 100,
"buttons": [
{
"type": "button",
"icon": "fa fa-eye",
"actionType": "dialog",
"dialog": {
"title": "查看",
"body": {
"type": "form",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "static",
"name": "engine",
"label": "Engine"
},
{
"type": "divider"
},
{
"type": "static",
"name": "browser",
"label": "Browser"
},
{
"type": "divider"
},
{
"type": "static",
"name": "platform",
"label": "Platform(s)"
},
{
"type": "divider"
},
{
"type": "static",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "static",
"name": "grade",
"label": "CSS grade"
},
{
"type": "divider"
},
{
"type": "html",
"html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
}
]
}
}
},
{
"type": "button",
"icon": "fa fa-pencil",
"actionType": "dialog",
"dialog": {
"position": "left",
"size": "lg",
"title": "编辑",
"body": {
"type": "form",
"name": "sample-edit-form",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"api": "/api/mock2/sample/$id",
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"body": [
文档加上去了
2020-07-28 10:03:53 +08:00
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "engine",
"label": "Engine",
"required": true
},
{
"type": "divider"
},
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "browser",
"label": "Browser",
"required": true
},
{
"type": "divider"
},
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "platform",
"label": "Platform(s)",
"required": true
},
{
"type": "divider"
},
{
1.2.x 文档&示例配置调整 (#2064) * 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
2021-06-07 10:09:55 +08:00
"type": "input-text",
文档加上去了
2020-07-28 10:03:53 +08:00
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "select",
"name": "grade",
"label": "CSS grade",
"options": ["A", "B", "C", "D", "X"]
}
]
}
}
},
{
"type": "button",
"icon": "fa fa-times text-danger",
"actionType": "ajax",
"confirmText": "您确认要删除?",
fix: 修复 popover 弹窗位置不对 (#3074)
2021-11-28 11:18:33 +08:00
"api": "delete:/api/mock2/sample/$id"
文档加上去了
2020-07-28 10:03:53 +08:00
}
],
"toggled": true
}
]
}
}
]
}
```
## 属性表
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
文档拆分组件部分 (#1502) * 文档样式一点小优化 * 文档拆分组件部分
2021-02-01 20:44:49 +08:00
| 属性名 | 类型 | 默认值 | 说明 |
| ------------ | ----------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
| source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
| multiple | `boolean` | | 是否为多选。 |
| delimeter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |
| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 [CRUD](../crud) |
| embed | `boolean` | `false` | 是否使用内嵌模式 |
Reference in New Issue Copy Permalink