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,一经查实,立即删除!

相关文章

【c++基础】分书问题

说明 已知有n本书(从1~n编号)和n个人(从1~n编号),每个人都有一个自己喜爱的书的列表,现在请你编写一个程序,设计一种分书方案,使得每个人都能获得一本书&…

AI专业面经

AI专业面经(部分) 一、数学部分: 1.1 代数(Algebra)和分析(Analysis):复习基本的代数和微积分概念,如线性代数、微分、积分等。 1.1.1 Algebra 1.1.1.1 基础知识 Rea…

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

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

线程生命周期

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

EventSource

什么是EventSource EventSource 是一个用于服务器推送事件(Server-Sent Events, SSE)的接口,它允许服务器推送实时更新到浏览器。与 WebSocket 不同,SSE 是单向的(服务器到客户端),适用于更新频…

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

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

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

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

Python语法(全)

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

Java将json字符串转为对象,保证字段顺序

一、引入依赖 <dependency><groupId>com.squareup.retrofit2</groupId><artifactId>converter-jackson</artifactId><version>2.9.0</version> </dependency>二、核心代码 public static String obj2JsonString(Object obj)…

nss做题

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

【一站式学会Kotlin】第七节:kotlin匿名函数的it关键字

作者介绍: 百度资深Android工程师T6,在百度任职7年半。 目前:成立赵小灰代码工作室,欢迎大家找我交流Android、微信小程序、鸿蒙项目。= 一:通俗易懂的人工智能教程:https://www.captainbed.cn/nefu/ 点一下,打开新世界的大门。 二:【一站式学会Kotlin】免费领取:文章…

验证软件需求

1 从哪些方面验证软件需求的正确性 需求分析阶段的工作结果是开发软件系统的重要基础,大量统计数字表明,软件系统中15%的错误起源于错误的需求。为了提高软件质量,确保软件开发成功,降低软件开发成本&#xff0c;一旦对目标系统提出一组要求之后,必须严格验证这些需求的…

常用激活函数学习

常用激活函数及其应用 ReLU (Rectified Linear Unit) 公式: f ( x ) max ⁡ ( 0 , x ) f(x) \max(0, x) f(x)max(0,x)理解: 当输入值为正时&#xff0c;输出等于输入值&#xff1b;否则输出为0。ReLU函数简单且计算效率高&#xff0c;能有效缓解梯度消失问题&#xff0c;促进…

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…

【退役之重学Java】关于 Gateway

一、 Gateway 是什么 Gateway 是 Spring cloud 的一个全新项目&#xff0c;基于 Spring 5 、Spring Boot 2 和 Project Reactor等技术开发的网关 旨在 是为微服务架构提供一种简单有效的统一的 API 路由管理方式 目标 是替代 Zuul 优势 性能更佳&#xff0c;Gateway 是基于 异步…

汇编小程序

汇编语言基础程序(持续更修…) 数组求和 ExitProcess PROTO.dataarr WORD 1,2,3,4,5,6,7,8,9,10 .code main PROCmov rbx, 0mov rcx, LENGTHOF arr ;获取arr元素个数mov rsi, OFFSET arr ;获取arr的首地址 Addsum:add bl, [rsi] ;获取rsi寄存器中保存地址对应的值x,…

如何使用MATLAB写测试(1)初识unittests

如何使用MATLAB写测试&#xff08;1&#xff09;初识unittests WHAT&#xff1a; 本文介绍如何在MATLAB中写简单的单元测试。 WHY&#xff1a; 在学生时代&#xff0c;我作为一名工科生喜欢用MATLAB的首要原因是可以进行快速的开发。无论是对算法的验证&#xff0c;调试&am…

【git pull 和 push详解】

git pull 和 push详解 1.背景2.命令和解释2.1 git pull简介详情 2.2 git push简介Git Push 参数及详细解释 1.背景 在分布式开发环境中&#xff0c;git pull和git push的使用确保了团队成员之间的代码一致性&#xff0c;减少了不同步导致的问题。它们简化了版本管理&#xff0c…

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

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

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

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