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

Posted 穆雄雄

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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-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],
            
          );
        
      
    ,

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

以上是关于element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现的主要内容,如果未能解决你的问题,请参考以下文章

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

el-form 多层级表单

vue+element-ui 实现重置表单内容

elementui表单溢出dialog

element ui 弹出组件的遮罩层以及多层遮罩解决办法

element-ui中el-table多层数组渲染问题