问题背景:

项目中使用到了百度的前端低代码框架 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"
}

Logo

一站式 AI 云服务平台

更多推荐