amis 联动效果触发的几种方式

联动效果实现主要俩种方式:

1.表达式实现联动,基于组件内或数据链的变量变化的联动

比如: "source": "/amis/api/mock2/options/level2?name=${name} "    (必须是这种字符串拼接形式,在data数据映射中表达式不会触发联动)

所有初始化接口链接上使用数据映射获取参数的形式时,例如下面的query=${query},在当前数据域中,所引用的变量值(即 query)发生变化时,自动重新请求该接口

接口联动一般只适用于初始化接口,例如:

• form组件中的initApi;

• select组件中的source选项源接口url, data只能用于主动联动;

• service组件中的api和schemaApi;

• crud组件中的api;(crud 默认是跟地址栏联动,如果要做请关闭同步地址栏 syncLocation: false)

• 等等...

如果 api 地址中有变量,比如 /api/mock2/sample/${id},amis 就不会自动加上分页参数,需要自己加上,改成 /api/mock2/sample/${id}?page=${page}&perPage=${perPage}

2.平级且会创建新数据域的组件间联动,无法通过引用链获取到的变量需使用此方式

2-1.通过Form的target属性  

  form配置target属性为目标组件name值,可以在触发提交行为后,将当前表单的数据域发送给目标组件(数据域中),并触发刷新重新调查询接口.

有一个表单form组件,还有一个列表组件crud,我们想要把form提交的数据,可以用作crud的查询条件,并请求crud的接口,由于form和crud位于同一层级,因此没法使用数据链的方式进行取值

进行两个调整:

1. 为crud组件设置了name属性为mcrud

2. 为form组件配置了target属性为crud的name:mcrud

更改配置后,提交form表单时,如果有配置提交接口,会先请求提交,之后 amis 会寻找target所配置的目标组件,把form中所提交的数据,发送给该目标组件中,并将该数据合并到目标组件的数据域中,并触发目标组件的刷新操作,对于 CRUD 组件来说,刷新即重新拉取数据接口

2-1.利用target实现inputTree与crud联动效果

(input-tree必须与form结合使用,form数据域里是{input-tree的name:输入值} ,点击input-tree不同选项时就会修改form数据域里的输入值 .       

配置form的target为crud的name, 并配置"submitOnChange": true,form数据域的值变化后触发form的提交行为,提交到配置的target组件中  )  

form配置target属性为目标组件name值,可以在触发提交行为后,将当前表单的数据域发送给目标组件,并触发刷新.

{"type": "page","id": "u:1c2c81063ddc","body": [{"type": "grid","columns": [{"body": [{"type": "form","id": "u:388c62109ac9","target": "mcrud","wrapWithPanel": false,"resetAfterSubmit": false,"debug": false,"submitOnInit": false,"submitOnChange": true,"body": [{"type": "input-tree","name": "modelClass","submitOnChange": true,"selectFirst": true,"source": {"method": "get","url": "/lbserver/api/ModelClass/findOptions","cache": 5000,"adaptor": "return {\n    status: 0,\n    msg: 'ok',\n    data: {\n        options:[\n{\"label\":\"全部分类\",value:\"\"},...payload.data.options\n        ]\n    }\n}","dataType": "json"},"height": "1000px","inline": false,"inputClassName": "h-full","id": "u:c519d9987ae7","multiple": false,"enableNodePath": false,"hideRoot": true,"showIcon": true,"initiallyOpen": true}]}],"id": "u:f32da427bbcd"},{"body": [{"type": "crud","name": "mcrud","api": {"url": "/lbserver/api/PageTemplate","method": "get","replaceData": false,"loadDataOnce": false,"dataType": "json","requestAdaptor": "let modelClass = api.query.modelClass;\r\nlet filter = {\r\n    'limit': api.query.perPage,\r\n    'skip': (api.query.page * api.query.perPage - api.query.perPage),\r\n    where: { modelClass: { like: modelClass || '' } },\r\n}\r\n\r\nlet url = api.url.split(\"?\")[0];\r\nurl = `${url}?filter=${JSON.stringify(filter)}`;\r\napi.url = url;\r\nreturn api;","data": {"&": "$$","modelClass": "${modelClass}"}},"columns": [{"name": "modelClass","label": "模型分类","align": "center","width": 170,"placeholder": "-","id": "u:c9b9842b2ffe","type": "tree-select","quickEdit": {"mode": "inline","type": "select","label": "","name": "modelClass","checkAll": false,"source": {"method": "get","url": "/lbserver/api/ModelClass/findOptions","cache": 5000},"placeholder": "-","size": "sm","submitOnChange": true,"id": "u:2c4985d29548","multiple": false,"disabled": true},"fixed": "","disabled": true},{"name": "name","label": "命名ID","align": "center","width": 280,"id": "u:c9c35d484864","fixed": "","placeholder": "-"},{"label": "页面名称","align": "center","width": 200,"placeholder": "-","id": "u:edb4c2a1d1a4","name": "title"},{"label": "描述信息","name": "desc","width": 280,"type": "text","className": "word-break text-center white-space-pre","fixed": "","inline": false,"toggled": true,"placeholder": "-","id": "u:5fb7eb4c5190","align": "center"}],"messages": {},"syncLocation": false,"perPageAvailable": [10],"defaultParams": {"perPage": "10"},"footerToolbar": [{"type": "bulk-actions"},{"type": "pagination"},{"type": "statistics","tpl": "内容"}],"silentPolling": true,"className": "word-break ","fixed": "right","inline": false,"stopAutoRefreshWhenModalIsOpen": true,"toggled": true,"checkAll": false,"keepItemSelectionOnPageChange": false,"autoFillHeight": false,"id": "u:faeebfd2d01c"}],"id": "u:1a430e75198f"}],"id": "u:36da4c4f7f94"}]
}

2-2.更高级更通用的是借助事件-动作(Event-Action)

比如通过setValue动作,修改另一个同级form表单的数据

动作setValue(组件中传递的参数必须是value, args: {value: {age:17} })

第一个form:

{"type": "form","title": "表单","body": [{"label": "文本框","type": "input-text","name": "text","id": "u:fdd256b622e0"}],"debug": true
}

    第二个form中配置setValue动作:

   "onEvent": {"click": {"actions": [{"componentId": "u:c123bdb1db9e", //方式一:设置到form中"args": {"value": "${event.data}" //此组件数据域(event.data)中数据全部传入.  },"actionType": "setValue"},{"actionType": "custom",//方式二:setValue到input组件,直接value:组件数据即可"script": "\nconsole.log(context.props, event)\ndoAction({\n  actionType: 'setValue', \n  componentId: 'u:fdd256b622e0', \n  args: {value: 17 }\n});\n"}],"weight": 0}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841049.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java进阶学习笔记10——子类构造器

子类构造器的特点: 子类的全部构造器,都会先调用父类的构造器,再执行自己。 子类会继承父类的数据,可能还会使用父类的数据。所以,子类初始化之前,一定先要完成父类数据的初始化,原因在于&…

线程生命周期

创建线程的两种方法 1.继承Thread类 2.实现Runnable接口 线程从创建到消亡分为新建、就绪、运行、阻塞、死亡5种状态。 新建状态 创建一个线程就处于新建状态。此时线程对象已经被分配了内存空间,并且私有数据也被初始化,但是该线程还不能运行。 就…

03-02-Vue组件之间的传值

前言 我们接着上一篇文章 03-01-Vue组件的定义和注册 来讲。 下一篇文章 04-Vue:ref获取页面节点–很简单 父组件向子组件传值 我们可以这样理解:Vue实例就是一个父组件,而我们自定义的组件(包括全局组件、私有组件)…

足球走地全自动化操作软件实现过程

本次采用selenium实现自动化操作的流程 打开浏览器录入账号密码等待数据请求(监听)有新数据,进行自动化操作通过homeName搜索,找到对应数据找到对应的类型(让、大小…)找到对应的盘口输入数量提交 附登录…

Python语法(全)

前言: 下面是Python基本的语法,大家耐心观看! 1.基础语法 1.1字面量 字面量:在代码中,被写下来的的固定的值,称之为字面 1.2字符串 字符串(string),又称文本&#xff…

nss做题

[NCTF 2018]签到题 1.f12在index.php中找到flag [NSSCTF 2022 Spring Recruit]ezgame 1.在js源码中就有flag [UUCTF 2022 新生赛]websign 1.打开环境后发现ctrlu和右键,f12都被禁用了。两种方法,第一种:禁用js;第二中提前打开…

vue 表单些某项 v-if 控制后,想在显示时添加验证

效果: 可以为<el-form-item>添加 key 然后prop正常写就行 (key需要唯一值) <el-form-item label"设置" v-if"advanced_setting" key"threshold" prop"threshold"><el-inputv-model"form_Warning.threshold"p…

关于burp的intruder返回包空白问题

记录一下被自己蠢笑的问题 burp返回包为空怎么办&#xff0c;在查询无果后经过多次试验&#xff0c;确实没有效果 看那三个点还以为加载呢&#xff0c;攻击完了怎么一个显示没有 于是…… 鼠标到三个点&#xff0c;往下一拉 哈哈哈哈哈哈哈&#xff0c;真是被自己给蠢到了

[5] CUDA线程调用与存储器架构

CUDA线程调用与存储器架构 前几节简单讲了如何编写CUDA程序&#xff0c;利用GPU的处理能力并行执行多个线程和块。之前所有程序里的线程是相互独立的&#xff0c;没有多个线程之间的通信多是实际应用程序需要中间线程之间的通信&#xff0c;本文将仔细讲解线程调用以及CUDA的分…

@JsonFormat注解出现日期序列化以及反序列化问题(日期比实际日期少一天)

文章目录 前言一、场景如下所示二、问题分析三、JsonFormat注解是什么以下是 JsonFormat 注解的一些常用属性&#xff1a; 四、解决问题解决方式&#xff1a;只需要指定对应的时区就好效果如下&#xff1a; 五、JsonFormat 注解时出现日期问题总结 前言 在一次的偶然机会下发现…

Python基于PyQt6制作GUI界面——按钮

示例对应的制作的 ui文件 界面如下所示。 <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0"><class>Form</class><widget class"QWidget" name"Form"><property name"geom…

ColossalAI Open-Sora 1.1 项目技术报告 (视频生成)

项目信息 项目地址&#xff1a;https://github.com/hpcaitech/Open-Sora技术报告&#xff1a; Open-Sora 1&#xff1a;https://github.com/hpcaitech/Open-Sora/blob/main/docs/report_01.mdOpen-Sora 1.1&#xff1a;https://github.com/hpcaitech/Open-Sora/blob/main/docs…

swift中json和字典Dict或者数组相互转换,JSONSerialization的强大使用

在Swift中&#xff0c;你可以使用JSONSerialization类将JSON字符串转换为字典。要将 Swift 字典转换为 JSON 字符串&#xff0c;我们可以使用JSONSerialization类的data(withJSONObject:options:)方法。这个方法将字典转换为二进制数据&#xff0c;然后我们可以使用String(data…

Day23:Leetcode:530.二叉搜索树的最小绝对差 + 501.二叉搜索树中的众数 + 236. 二叉树的最近公共祖先

LeetCode&#xff1a;530.二叉搜索树的最小绝对差 问题描述 解决方案&#xff1a; 1.思路 中序遍历 2.代码实现 class Solution {int pre;int ans;public int getMinimumDifference(TreeNode root) {ans Integer.MAX_VALUE;pre -1;dfs(root);return ans;}public void d…

Unity射击游戏开发教程:(26)创建绕圈跑的效果

unity游戏 在本文中,我将介绍如何为敌人创建圆周运动。gif 中显示的确切行为是敌人沿着屏幕向下移动,直到到达某个点,一旦到达该点,它就会绕圈移动。

从浮点数定义到FP8: AI模型中不同的数据类型

背景&#xff1a;AI模型中不同的数据类型对硬件算力和内存的需求是不同的&#xff0c;为了提高模型在硬件平台的吞吐量&#xff0c;减少数据通信带宽需求&#xff0c;往往倾向于将高位宽数据运算转向较低位宽的数据运算。本文通过重新回顾计算机中整数和浮点数的定义&#xff0…

HCIP-Datacom-ARST自选题库__ISIS简答【3道题】

1.IS-1S是链路状态路由协议&#xff0c;便用SPF算法进行路由计算。某园区同时部署了IPv4和IPV6井运行IS-IS实现网络的互联互通&#xff0c;如图所示&#xff0c;该网络IPv4和IPV6开销相同&#xff0c;R1和R4只支持IPV4。缺省情况下&#xff0c;计算形成的IPv6最短路径树中&…

python数据分析——字符串和文本数据2

参考资料&#xff1a;活用pandas库 1、字符串格式化 &#xff08;1&#xff09;格式化字符串 要格式化字符串&#xff0c;需要编写一个带有特殊占位符的字符串&#xff0c;并在字符串上调用format方法向占位符插入值。 # 案例1 varflesh wound s"Its just a {}" p…

solidworks画螺母学习笔记

螺母 单位mm 六边形 直径16mm&#xff0c;水平约束&#xff0c;内圆直径10mm 拉伸 选择两侧对称&#xff0c;厚度7mm 拉伸切除 画相切圆 切除深度7mm&#xff0c;反向切除 拔模角度45 镜像切除 倒角 直径1mm 异形孔向导 螺纹线 偏移打勾&#xff0c;距离为2mm…

java:static关键字用法

在静态方法中不能访问类的非静态成员变量和非静态方法&#xff0c; 因为非静态成员变量和非静态方法都必须依赖于具体的对象才能被调用。 从上面代码里看出&#xff1a; 1.静态方法不能调用非静态成员变量。静态方法test2()中调用非静态成员变量address&#xff0c;编译失败…