前端 低代码平台 百度 amis 使用遇到的问题 picker 选择记录后 赋值其它字段。
前端 低代码平台 百度 amis 使用遇到的问题 picker 选择记录后 赋值其它字段。
·
问题背景:
项目中使用到了百度的前端低代码框架 amis,能提高开发效率。
在使用 amis 的组件picker 时,遇到了一个问题:
我想实现的效果是 选择picker 弹出框 的记录后,将选定记录的值赋值给相同 form 的其它字段,但是一直没有效果。
显示效果:

示例代码:
{
"type": "page",
"body": [
{
"type": "form",
"api": "/amis/api/mock2/form/saveForm",
"body": [
{
"type": "picker",
"name": "picker",
"label": "picker",
"options": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
],
"onEvent": {
"change": {
"actions": [
{
"actionType": "setValue",
"componentId": "u:d87fa63c723c",
"args": {
"value": "${event.data.value}"
}
}
],
"actionType": "nonstatic"
}
},
"id": "u:6dc45aa70cd4"
},
{
"id": "u:d87fa63c723c",
"type": "input-text",
"label": "合同标的",
"name": "projectName",
"required": false
}
],
"id": "u:dd46b11ca5f4",
"actions": [
{
"type": "submit",
"label": "提交",
"primary": true,
"id": "u:4dfba9df0966"
}
],
"feat": "Insert"
}
],
"id": "u:6be1e81c2bd8"
}
问题解决:
重点在于,actions 中的 args 属性的赋值要使用如下的方式
"args": {
"value": "${event.data.value}"
}
如果 picker 的列表值是对象,可以使用这种方式
{
"type": "page",
"body": [
{
"type": "form",
"api": "/amis/api/mock2/form/saveForm",
"body": [
{
"type": "picker",
"name": "picker",
"label": "picker",
"id": "u:6dc45aa70cd4",
"options": [
{
"id": "1",
"name": "北京",
"province": "北京"
},
{
"id": "2",
"name": "上海",
"province": "上海"
}
],
"onEvent": {
"change": {
"actions": [
{
"actionType": "setValue",
"componentId": "u:d87fa63c723c",
"args": {
"value": "${selectedItems.name}"
}
}
],
"actionType": "nonstatic"
}
},
"labelField": "name", // 用于显示在下拉列表中的字段
"valueField": "id", // 实际选中的值对应的字段
"placeholder": "请选择城市"
},
{
"id": "u:d87fa63c723c",
"type": "input-text",
"label": "合同标的",
"name": "projectName",
"required": false
}
],
"id": "u:dd46b11ca5f4",
"actions": [
{
"type": "submit",
"label": "提交",
"primary": true,
"id": "u:4dfba9df0966"
}
],
"feat": "Insert"
}
],
"id": "u:6be1e81c2bd8"
}

更多推荐




所有评论(0)