数据域监听，并且立刻执行某一些操作

[koala-wei]

是否关联于某个问题吗：

input-three树形控件，我必须要选中某一个节点，然后点击提交表带，才可以刷新别的组件。但往往我们更希望的是，点击某一个节点之后，可以立马刷新别的组件，而不是通过点击提交的方式。

预期的解决方案：

实现数据监听，并且可以触发行为、联动组件。当某一个数据域中的数据发生变化，我希望立刻执行一些操作

[haoxj0823]

input-tree 与 input-text 及 input-number 都是一样的，都是可以通过 name 访问其值 下面是一个示例，input-tree 与 input-text 可以进行互动

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "body": [
      {
        "type": "input-text",
        "name": "tree"
      },
      {
        "type": "input-tree",
        "name": "tree",
        "label": "Tree",
        "options": [
          {
            "label": "Folder A",
            "value": 1,
            "children": [
              {
                "label": "file A",
                "value": 2
              },
              {
                "label": "Folder B",
                "value": 3,
                "children": [
                  {
                    "label": "file b1",
                    "value": 3.1
                  },
                  {
                    "label": "file b2",
                    "value": 3.2
                  }
                ]
              }
            ]
          },
          {
            "label": "file C",
            "value": 4
          },
          {
            "label": "file D",
            "value": 5
          }
        ]
      }
    ]
  }
}

[cmdares]

比如有这样个需求，左侧是个树，右侧是个列表，点击树节点，需要激活右侧列表的service的api更换请求后台的参数，动态刷新表格中的数据。请给出个示例，谢谢。 @haoxj0823

[haoxj0823]

比如有这样个需求，左侧是个树，右侧是个列表，点击树节点，需要激活右侧列表的service的api更换请求后台的参数，动态刷新表格中的数据。请给出个示例，谢谢。 @haoxj0823

我猜测你的问题应该是组件间联动，官网中给出的联动方式是通过 action 实现的，如果想自动触发可以设置 form 的 submitOnChange 为 true ，同时设置 reload 为目标组件。 组件之间不能直接进行数据的访问，主要还是由于不在同一数据链中，根据你当前的需求，input-tree 不要放到 form 中，直接与 crud 放到同一级或同一数据链中，就可以实现你想要的效果。

[cmdares]

感谢解答，理解您说的意思，初次接触amis，配置不熟，希望您给个json配置，示范一下。

[haoxj0823]

感谢解答，理解您说的意思，初次接触amis，配置不熟，希望您给个json配置，示范一下。

下面是从官网示例中拼凑出来的代码，你可以直接粘贴到官网的代码区中查看效果

{
  "type": "page",
  "asideResizor": true,
  "asideMinWidth": 150,
  "asideMaxWidth": 400,
  "aside": [
    {
      "type": "input-tree",
      "name": "tree",
      "treeContainerClassName": "border-0",
      "options": [
        {
          "label": "Folder A",
          "value": 1,
          "children": [
            {
              "label": "file A",
              "value": 2
            },
            {
              "label": "Folder B",
              "value": 3,
              "children": [
                {
                  "label": "file b1",
                  "value": 3.1
                },
                {
                  "label": "file b2",
                  "value": 3.2
                }
              ]
            }
          ]
        },
        {
          "label": "file C",
          "value": 4
        },
        {
          "label": "file D",
          "value": 5
        }
      ]
    }
  ],
  "body": [
    {
      "type": "crud",
      "api": {
        "url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample?id=${tree}",
        "data": {
          "page": "${page}",
          "perPage": "${perPage}"
        }
      },
      "syncLocation": false,
      "columns": [
        {
          "name": "id",
          "label": "ID"
        },
        {
          "name": "engine",
          "label": "Rendering engine"
        },
        {
          "name": "browser",
          "label": "Browser"
        },
        {
          "name": "platform",
          "label": "Platform(s)"
        },
        {
          "name": "version",
          "label": "Engine version"
        },
        {
          "name": "grade",
          "label": "CSS grade"
        }
      ]
    }
  ]
}

[cmdares]

感谢您的回复，非常有用。

[jiasijiamn]

感谢解答，理解您说的意思，初次接触amis，配置不熟，希望您给个json配置，示范一下。

下面是从官网示例中拼凑出来的代码，你可以直接粘贴到官网的代码区中查看效果

{
  "type": "page",
  "asideResizor": true,
  "asideMinWidth": 150,
  "asideMaxWidth": 400,
  "aside": [
    {
      "type": "input-tree",
      "name": "tree",
      "treeContainerClassName": "border-0",
      "options": [
        {
          "label": "Folder A",
          "value": 1,
          "children": [
            {
              "label": "file A",
              "value": 2
            },
            {
              "label": "Folder B",
              "value": 3,
              "children": [
                {
                  "label": "file b1",
                  "value": 3.1
                },
                {
                  "label": "file b2",
                  "value": 3.2
                }
              ]
            }
          ]
        },
        {
          "label": "file C",
          "value": 4
        },
        {
          "label": "file D",
          "value": 5
        }
      ]
    }
  ],
  "body": [
    {
      "type": "crud",
      "api": {
        "url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample?id=${tree}",
        "data": {
          "page": "${page}",
          "perPage": "${perPage}"
        }
      },
      "syncLocation": false,
      "columns": [
        {
          "name": "id",
          "label": "ID"
        },
        {
          "name": "engine",
          "label": "Rendering engine"
        },
        {
          "name": "browser",
          "label": "Browser"
        },
        {
          "name": "platform",
          "label": "Platform(s)"
        },
        {
          "name": "version",
          "label": "Engine version"
        },
        {
          "name": "grade",
          "label": "CSS grade"
        }
      ]
    }
  ]
}

请问点击不同层级，请求不同接口，展示不同表格这个功能怎么实现呢？ 怎么才能拿到树的层级呢？

[hsm-lv]

展示不同表格可以通过onVisible控制，请求不同接口就是普通的接口参数绑定实现联动 https://baidu.github.io/amis/zh-CN/docs/concepts/linkage