联动的例子需要更详细化,联通的功能可能需要加强。
是否关联于某个问题吗:
关于联动,对于一个复杂的页面,页面之间各个组件之间的联动变得越来越普遍和常用。 举几个例子: 一、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
- input-tree 放在 form,form 里面有个 submitOnChange 为 true 的设置。然后 form 的 target 设置成 body 里面的组件,这样组件就会实时接收到新数据。
- 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.
- input-tree 放在 form,form 里面有个 submitOnChange 为 true 的设置。然后 form 的 target 设置成 body 里面的组件,这样组件就会实时接收到新数据。
- 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条件好像不生效
- input-tree 放在 form,form 里面有个 submitOnChange 为 true 的设置。然后 form 的 target 设置成 body 里面的组件,这样组件就会实时接收到新数据。
- 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组件 您实现这个功能了吗,想实现一个同样的功能,求指点
- input-tree 放在 form,form 里面有个 submitOnChange 为 true 的设置。然后 form 的 target 设置成 body 里面的组件,这样组件就会实时接收到新数据。
- 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"
}
补充,关于联动,还可以考虑事件动作机制:https://baidu.github.io/amis/zh-CN/docs/concepts/event-action