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

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


父组件引入子组件

[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窗体关闭。分别对应的方法如下:

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

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

目录
打赏
0
0
0
0
57
分享
相关文章
|
6月前
|
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
594 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
443 0
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
163 0
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
581 0
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
194 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
25 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
101 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
62 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
97 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)

热门文章

最新文章