element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂

前言

现在是2022年5月3日17:02:30!文接上两篇。

[element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作](element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作_穆雄雄的博客-CSDN博客)

[element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现]((30条消息) element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现_穆雄雄的博客-CSDN博客)

这是最后一篇文章,前两篇主要介绍了页面的操作以及添加功能的实现,本篇文章我们来看看elementui复杂表单下,如何进行回显。

因为这一块儿的前后端都是我自己写的,所以就比较灵活了,前端想要什么样的数据,自己说了算,然后后端就给其封装一个什么样的数据。

父组件引入子组件

[element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作](element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作_穆雄雄的博客-CSDN博客)第一篇文章我就分析过,这是一个多层级的表单,所以避免不好要使用循环来实现,于是我就在后台封装了两个对象,一个是最外面基本信息的数据,另一个就是采集数据的配置信息。

代码实现如下:

	/*** 根据设备编号查询配置文件* @return*/@GetMapping("/getDataSourceConfigInfo")@ApiOperationSupport(order = 6)@ApiOperation(value = "根据设备编号查询配置文件", notes = "传入device")public R getDataSourceConfigInfo(Long deviceId){//获取设备的信息Device device = deviceService.getById(deviceId);LambdaQueryWrapper<DataSourceConfig> dataSourceConfigLambdaQueryWrapper = new LambdaQueryWrapper<>();dataSourceConfigLambdaQueryWrapper.eq(DataSourceConfig::getDeviceId,deviceId);//拿到配置信息的集合List<DataSourceConfig> dataSourceConfigList = dataSourceConfigService.list(dataSourceConfigLambdaQueryWrapper);Map<String,Object> map = new HashMap<>();map.put("device",device);map.put("dataSourceConfigList",dataSourceConfigList);return R.data(map);}

设备的信息都放在了device对象中,配置信息都放在了dataSourceConfigList集合中,这样放的目的就是在前台好遍历。

前台用的子父组件实现的,父组件中引用子组件:

  • 引入子组件:
import editDevice from "./editDevice.vue";
 components: {addDevice,editDevice,viewDevice,},
  <el-dialogtitle="编 辑":visible.sync="editDeviceDialogVisible":append-to-body="true"width="70%"><editDevice:editDeviceData="editDeviceData"@editDeviceResult="editDeviceResult"@quxiaoClickResult="quxiaoClickResult"></editDevice></el-dialog>

其中:editDeviceData是传递给子组件的数据,也就是在控制器中封装查出来的。

editDeviceResult是子组件传递给父组件的方法,我这边是子组件点击了确定之后,告诉父组件一下,然后将其dialog窗体关闭。分别对应的方法如下:

  1. editDeviceData数据获取的方法:
 /*查看设备的按钮*/viewDevice(row){//获取详细信息getDataSourceConfigInfo(row.id).then((res) => {this.editDeviceData =res.data.data;this.viewDeviceDialogVisible  = true;});},
  1. editDeviceResult编辑成功之后的方法:
  //编辑设备完成editDeviceResult(val){if(val==true){//关掉添加的窗体this.editDeviceDialogVisible = false;//刷新设备的信息this.refreshChangeCard();}},
  1. quxiaoClickResult子组件中取消按钮的实现方法:
 //添加和修改的子组件取消按钮点击事件quxiaoClickResult(val){if(val==true){//关掉添加的窗体this.addDeviceDialogVisible = false;this.editDeviceDialogVisible = false;this.viewDeviceDialogVisible = false;//刷新设备的信息this.refreshChangeCard();}},

子组件中实现回显

子组件的核心代码就一个方法,即拿到父组件传过来的数据,进行遍历的显示在页面上。

props:{editDeviceData: {type:Object}},

mounted中调用展示数据的方法:

//获取设备的信息this.getDeviceInfo();

methods中实现展示数据、封装数据的方法:

   //获取设备的信息getDeviceInfo(){let mapObject = this.editDeviceData;this.form = mapObject.device;this.dialogImageUrl = this.form.certificateImgUrl;this.productImgs.push({name: '',url: this.dialogImageUrl,});let deviceSdkPackage = mapObject.device.deviceSdkPackage.substring(mapObject.device.deviceSdkPackage.lastIndexOf(".")+1);this.form.deviceSdkPackage = deviceSdkPackage;this.attribute.length = mapObject.dataSourceConfigList.length;for(var i =0;i< this.attribute.length;i++) {let dataSourceConfig = mapObject.dataSourceConfigList[i];this.deviceDataCheck[i] = dataSourceConfig.dataCollectionType;this.samplingFrequency[i] = dataSourceConfig.samplingFrequency;this.schemeOfDataSourceType[i] = dataSourceConfig.schemeOfDataSourceType;this.countOfCompound[i] = dataSourceConfig.countOfCompound;this.measurePeriodExist[i] = dataSourceConfig.measurePeriodExist+"";var countOfCompoundLength =  this.countOfCompound[i];var dataSourceType = (dataSourceConfig.dataSourceType).split(",");var unitCode = (dataSourceConfig.unitCode).split(",");var dataType = (dataSourceConfig.dataType).split(",");var metricSpec = (dataSourceConfig.metricSpec).split(",");this.formList[i]=[];for(var j = 0;j<dataSourceType.length;j++){this.formList[i].push({dataSourceType: dataSourceType[j],unitCode: unitCode[j],dataType: dataType[j],metricSpec: metricSpec[j],});}}},

以上代码,回显即可实现,实际上后台的代码不是很多,前端代码要比较多点儿,但是只要你思路理清了,其实也没有太复杂。

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

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

相关文章

在Mac的Docker中运行DotNetCore2.0

最近学习Angular4&#xff0c;服务端准备使用DotNetCore API来实现&#xff0c;本文简单介绍下在Mac中怎样将DotNetCore程序部署在Docker中&#xff0c;并使用Nginx做反向代理让程序可以跑起来。 具体步骤如下 安装Docker拉取DotNetCore镜像使用VS For Mac创建DotNetCore应用…

POJ2482-Stars in Your Window【线段树,扫描线,离散化】

正题 题目链接:http://poj.org/problem?id2482 题目大意 有若干个点&#xff0c;每个点有不同的权值&#xff0c;求用一个h*w的矩阵扩起来的权值最大。 解题思路 先离散化一个坐标&#xff0c;然后另一个坐标就在x∼xw−1x∼xw−1这个区域加上权值&#xff0c;然后每个点的…

20个高级Java面试题汇总

转载自 20个高级Java面试题汇总 译文链接&#xff1a;http://www.codeceo.com/article/20-java-advanced-interview-questions.html 英文原文&#xff1a;Advanced Java Interview Questions 翻译作者&#xff1a;码农网 – 小峰 这是一个高级Java面试系列题中的部分。这一部分…

springboot实现复杂业务下的更新操作

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2022年5月4日19:25:55&#xff01;今天写了个这样的功能&#xff1a; 某用户在一天内有多个训练项目&#xff0c;比如&#xff1a;晨跑&#xff0c;有氧训练&#xff0c;跳绳这…

HDOJ5542-The Battle of Chibi【树状数组,dp】

正题 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid5542 题目大意 求序列A有多少个长度为M的递增子序列。 解题思路 用fi,jfi,j表示长度为i&#xff0c;以AjAj结尾的序列的个数。然后显然得出动态转移方程通过上一次从任意一个地方转移&#xff0c;动态转移方程&…

ASP.NET Core中为指定类添加WebApi服务功能

POCO Controller是 ASP.NET Core 中的一个特性&#xff0c;虽然在2015年刚发布的时候就有这个特性了&#xff0c;可是大多数开发者都只是按原有的方式去写&#xff0c;而没有用到这个特性。其实&#xff0c;如果利用这个特性进行稍微封装后&#xff0c;用在SOA架构中Service层的…

elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是2022年5月5日22:48:21&#xff01; 今天在使用element-ui中的el-dialog的时候遇到了个这样的问题&#xff1a;页面上点击添加的按钮&#xff0c;弹出el-dialog对话框&#xff…

MySQL 中的重做日志,回滚日志以及二进制日志的简单总结

转载自 MySQL 中的重做日志&#xff0c;回滚日志以及二进制日志的简单总结 MySQL中有六种日志文件&#xff0c;分别是&#xff1a;重做日志&#xff08;redo log&#xff09;、回滚日志&#xff08;undo log&#xff09;、二进制日志&#xff08;binlog&#xff09;、错误日志…

c语言分离三位数

#include<stdio.h> main(){ int k,l,m,n;printf("请输入一个三位数"); scanf("%d",&k);lk/100;mk/10%10;nk%10;printf("这个三位数的百位是:%d\n",l);printf("这个三位数的十位是:%d\n",m);printf("这个三位数的个位是…

POJ1821-Fence【单调队列,dp】

正题 题目链接:http://poj.org/problem?id1821 题目大意 有n个木板,m个工人&#xff0c;每个木板只能被粉刷一次&#xff0c;第i个工人如果刷的话必须刷木板SiSi&#xff0c;连续的不超过LiLi的&#xff0c;没一块PiPi。 解题思路 用fi,jfi,j表示前j块木板&#xff0c;前i个…

分布式ID自增算法 Snowflake

近在尝试EF的多数据库移植&#xff0c;但是原始项目中主键用的Sqlserver的GUID。MySQL没法移植了。 其实发现GUID也没法保证数据的递增性&#xff0c;又不太想使用int递增主键&#xff0c;就开始探索别的ID形式。 后来发现twitter的Snowflake算法。 一开始我尝试过直接引用N…

java中,根据指定日期显示出前n天的日期

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 今天分享的是&#xff1a;在java中&#xff0c;根据指定日期显示出前n天的日期 效果如下&#xff1a; 大家注意观察上面的时间&#xff0c;我传入的时间是&#xff1a;2022年5月9日21:28:…

你真的很熟分布式和事务吗?

转载自 你真的很熟分布式和事务吗&#xff1f; 微吐槽 hello,world. 不想了&#xff0c;我等码农&#xff0c;还是看看怎么来处理分布式系统中的事务这个老大难吧&#xff01; 本文略长&#xff0c;读者需要有一定耐心&#xff0c;如果你是高级码农或者架构师级别&#xf…

线程1

模拟龟兔赛跑 线程1 package test;/*** 模拟龟兔赛跑* author Administrator**/ class Rab extends Thread{public void run() {for (int i 0; i < 100; i) {System.out.println("兔子跑了"i"步");}} }class array1 extends Thread{public void run(…

jdbc实现批量给多个表中更新数据(解析Excel表数据插入到数据库中)

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是&#xff1a;2022年5月19日08:01:51 今天遇到了个这样的需求&#xff0c;解析excel表中的数据&#xff0c;以JDBC的方式&#xff0c;将数据批量更新至不同的数据表中。注意&am…

CF559C-Gerald and Giant Chess【计数类dp】

正题 上不了Codeforces&#xff0c;就用洛谷了 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidCF559C 题目大意 H∗WH∗W的棋盘上有一个卒从(1,1)走到(H,W)&#xff0c;有些点不能走&#xff0c;求方案总数。 解题思路 首先如果没有障碍走到(i,j)方案数…

.Net Core 全局配置读取管理方法 ConfigurationManager

最近在学习.Net Core的过程中&#xff0c;发现.Net Framework中常用的ConfigurationManager在Core中竟然被干掉了。 也能理解。Core中使用的配置文件全是Json&#xff0c;不像Framework使用的XML&#xff0c;暂时不支持也是能理解的&#xff0c;但是毕竟全局配置文件这种东西还…

Http 持久连接与 HttpClient 连接池

转载自 Http 持久连接与 HttpClient 连接池 一、背景 HTTP协议是无状态的协议&#xff0c;即每一次请求都是互相独立的。因此它的最初实现是&#xff0c;每一个http请求都会打开一个tcp socket连接&#xff0c;当交互完毕后会关闭这个连接。 HTTP协议是全双工的协议&#x…

jdbc解析excel文件,批量插入数据至库中

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言现在是&#xff1a;2022年5月20日09:32:38今天遇到了个这样的需求&#xff0c;解析excel表中的数据&#xff0c;以JDBC的方式&#xff0c;将数据批量更新至不同的数据表中。注意&…

线程2

public class test{/*** 测试延迟继承* param args*/public static void main(String[] args) {Cat catnew Cat();cat.start();//启动线程&#xff0c;会导致run函数的运行Dog dognew Dog();//创建一个线程对象Thread tnew Thread(dog);t.start();}} //继承Thread创建线程 clas…