食品网站网页设计,wordpress弹出,网站 建设 步骤是,包头公司做网站大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;雄雄的小课堂 前言
现在是2022年5月3日17:02:30#xff01;文接上两篇。
[element ui实现多层级复杂表单的操作#xff08;添加与回显#xff09;之表单操作交互操作](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);LambdaQueryWrapperDataSourceConfig dataSourceConfigLambdaQueryWrapper new LambdaQueryWrapper();dataSourceConfigLambdaQueryWrapper.eq(DataSourceConfig::getDeviceId,deviceId);//拿到配置信息的集合ListDataSourceConfig dataSourceConfigList dataSourceConfigService.list(dataSourceConfigLambdaQueryWrapper);MapString,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.synceditDeviceDialogVisible:append-to-bodytruewidth70%editDevice:editDeviceDataeditDeviceDataeditDeviceResulteditDeviceResultquxiaoClickResultquxiaoClickResult/editDevice/el-dialog其中editDeviceData是传递给子组件的数据也就是在控制器中封装查出来的。
editDeviceResult是子组件传递给父组件的方法我这边是子组件点击了确定之后告诉父组件一下然后将其dialog窗体关闭。分别对应的方法如下
editDeviceData数据获取的方法 /*查看设备的按钮*/viewDevice(row){//获取详细信息getDataSourceConfigInfo(row.id).then((res) {this.editDeviceData res.data.data;this.viewDeviceDialogVisible true;});},editDeviceResult编辑成功之后的方法 //编辑设备完成editDeviceResult(val){if(valtrue){//关掉添加的窗体this.editDeviceDialogVisible false;//刷新设备的信息this.refreshChangeCard();}},quxiaoClickResult子组件中取消按钮的实现方法 //添加和修改的子组件取消按钮点击事件quxiaoClickResult(val){if(valtrue){//关掉添加的窗体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;jdataSourceType.length;j){this.formList[i].push({dataSourceType: dataSourceType[j],unitCode: unitCode[j],dataType: dataType[j],metricSpec: metricSpec[j],});}}},以上代码回显即可实现实际上后台的代码不是很多前端代码要比较多点儿但是只要你思路理清了其实也没有太复杂。
