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

前言

现在是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;});},

2. editDeviceResult编辑成功之后的方法：

  //编辑设备完成editDeviceResult(val){if(val==true){//关掉添加的窗体this.editDeviceDialogVisible = false;//刷新设备的信息this.refreshChangeCard();}},

3. 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],});}}},

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