父组件引入子组件
[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-dialog title="编 辑" :visible.sync="editDeviceDialogVisible" :append-to-body="true" width="70%" > <editDevice :editDeviceData="editDeviceData" @editDeviceResult="editDeviceResult" @quxiaoClickResult="quxiaoClickResult" ></editDevice> </el-dialog>
其中：editDeviceData是传递给子组件的数据，也就是在控制器中封装查出来的。
editDeviceResult是子组件传递给父组件的方法，我这边是子组件点击了确定之后，告诉父组件一下，然后将其dialog窗体关闭。分别对应的方法如下：
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], }); } } },
以上代码，回显即可实现，实际上后台的代码不是很多，前端代码要比较多点儿，但是只要你思路理清了，其实也没有太复杂。
