amis icon indicating copy to clipboard operation
amis copied to clipboard

联动的例子需要更详细化,联通的功能可能需要加强。

Open smallwl opened this issue 4 years ago • 3 comments

是否关联于某个问题吗:

关于联动,对于一个复杂的页面,页面之间各个组件之间的联动变得越来越普遍和常用。 举几个例子: 一、aside控制body。已有例子nav,form。但缺少tree,只有input-tree。特别是当input-tree设为可以多选时,变化即传值刷新body,如何实现? 二、form1控制form2,已有的例子是通过form2的api,效果是刷新整个form2。但form1如何控制form2的某一个组件,如:input-tree。即form外围(不局限于form,只要body的data变化)如何控制form内的某一个组件刷新?

预期的解决方案:

联动的例子也许需要加强和细化。 https://baidu.gitee.io/amis/examples/linkpage/page

smallwl avatar Nov 11 '21 02:11 smallwl

  1. input-tree 放在 form,form 里面有个 submitOnChange 为 true 的设置。然后 form 的 target 设置成 body 里面的组件,这样组件就会实时接收到新数据。
  2. form1 如果配置 reload 或者 target 为 form2.treeField 那么就会把接收者对象设置成了 form2 下面的 input-tree ,如果 input-tree 配置了 source 接口,就会刷新一次。另外 source 接口里面如果参数 source: "/api/treeData?a=${a}" ,只要 form2 里面的 a 变量发生变化,也会触发 form2 下面的 input-tree 的刷新,所以 form1 如果配置 reload: "form2?a=新值" 也会刷新 input-tree.

2betop avatar Nov 11 '21 05:11 2betop

  1. input-tree 放在 form,form 里面有个 submitOnChange 为 true 的设置。然后 form 的 target 设置成 body 里面的组件,这样组件就会实时接收到新数据。
  2. form1 如果配置 reload 或者 target 为 form2.treeField 那么就会把接收者对象设置成了 form2 下面的 input-tree ,如果 input-tree 配置了 source 接口,就会刷新一次。另外 source 接口里面如果参数 source: "/api/treeData?a=${a}" ,只要 form2 里面的 a 变量发生变化,也会触发 form2 下面的 input-tree 的刷新,所以 form1 如果配置 reload: "form2?a=新值" 也会刷新 input-tree.

我想根据tree点击的对象不同,右边body显示不同组件, 比如,tree有个objType属性,根据点击的objType,显示不同crud,如何实现呢?我用visbleOn条件好像不生效

xingsheq avatar Jan 11 '22 03:01 xingsheq

  1. input-tree 放在 form,form 里面有个 submitOnChange 为 true 的设置。然后 form 的 target 设置成 body 里面的组件,这样组件就会实时接收到新数据。
  2. form1 如果配置 reload 或者 target 为 form2.treeField 那么就会把接收者对象设置成了 form2 下面的 input-tree ,如果 input-tree 配置了 source 接口,就会刷新一次。另外 source 接口里面如果参数 source: "/api/treeData?a=${a}" ,只要 form2 里面的 a 变量发生变化,也会触发 form2 下面的 input-tree 的刷新,所以 form1 如果配置 reload: "form2?a=新值" 也会刷新 input-tree.

我想根据tree点击的对象不同,右边body显示不同组件, 比如,tree有个objType属性,根据点击的objType,显示不同crud,如何实现呢?我用visbleOn条件好像不生效

您好,根据tree点击的对象不同,右边展示不同的body组件 您实现这个功能了吗,想实现一个同样的功能,求指点

jiasijiamn avatar Jul 20 '22 11:07 jiasijiamn

  1. input-tree 放在 form,form 里面有个 submitOnChange 为 true 的设置。然后 form 的 target 设置成 body 里面的组件,这样组件就会实时接收到新数据。
  2. form1 如果配置 reload 或者 target 为 form2.treeField 那么就会把接收者对象设置成了 form2 下面的 input-tree ,如果 input-tree 配置了 source 接口,就会刷新一次。另外 source 接口里面如果参数 source: "/api/treeData?a=${a}" ,只要 form2 里面的 a 变量发生变化,也会触发 form2 下面的 input-tree 的刷新,所以 form1 如果配置 reload: "form2?a=新值" 也会刷新 input-tree.

我想根据tree点击的对象不同,右边body显示不同组件, 比如,tree有个objType属性,根据点击的objType,显示不同crud,如何实现呢?我用visbleOn条件好像不生效

您好,根据tree点击的对象不同,右边展示不同的body组件 您实现这个功能了吗,想实现一个同样的功能,求指点

需要确认组件在相同数据域下,可与直接通过访问tree选中项结合visibleOn实现

{
  "type": "flex",
  "className": "p-1",
  "items": [
    {
      "type": "container",
      "body": [
        {
          "type": "input-tree",
          "label": "树选择框",
          "name": "tree",
          "options": [
            {
              "label": "选项A",
              "value": "A",
              "children": [
                {
                  "label": "选项C",
                  "value": "C"
                },
                {
                  "label": "选项D",
                  "value": "D"
                }
              ]
            },
            {
              "label": "选项B",
              "value": "B"
            }
          ],
          "id": "u:16c5ff2257f6"
        }
      ],
      "size": "xs",
      "style": {
        "position": "static",
        "display": "block",
        "flex": "1 1 auto",
        "flexGrow": 1,
        "flexBasis": "auto"
      },
      "wrapperBody": false,
      "isFixedHeight": false,
      "isFixedWidth": false,
      "id": "u:46ca7cbfefe9"
    },
    {
      "type": "container",
      "body": [
        {
          "type": "crud",
          "syncLocation": false,
          "api": {
            "method": "get",
            "url": ""
          },
          "columns": [
            {
              "name": "id",
              "label": "ID",
              "type": "text",
              "id": "u:d39c2599385e"
            },
            {
              "name": "engine",
              "label": "渲染引擎",
              "type": "text",
              "id": "u:cab6e4958c8f"
            }
          ],
          "bulkActions": [
          ],
          "itemActions": [
          ],
          "id": "u:dd1fb7b35105",
          "visibleOn": "${tree === 'A'}"
        },
        {
          "type": "crud",
          "syncLocation": false,
          "api": {
            "method": "get",
            "url": ""
          },
          "columns": [
            {
              "name": "id",
              "label": "ID",
              "type": "text",
              "id": "u:5bd616e53857"
            },
            {
              "name": "engine",
              "label": "渲染引擎",
              "type": "text",
              "id": "u:df9f5f76d59f"
            }
          ],
          "bulkActions": [
          ],
          "itemActions": [
          ],
          "visibleOn": "${tree === 'C'}",
          "id": "u:d48736ecad61"
        }
      ],
      "size": "xs",
      "style": {
        "position": "static",
        "display": "block",
        "flex": "1 1 auto",
        "flexGrow": 1,
        "flexBasis": "auto"
      },
      "wrapperBody": false,
      "isFixedHeight": false,
      "isFixedWidth": false,
      "id": "u:74e6220c368d"
    }
  ],
  "style": {
    "position": "relative"
  },
  "id": "u:cfabbb86b3b2"
}

hsm-lv avatar Nov 25 '23 08:11 hsm-lv

补充,关于联动,还可以考虑事件动作机制:https://baidu.github.io/amis/zh-CN/docs/concepts/event-action

hsm-lv avatar Nov 25 '23 08:11 hsm-lv