element ui实现多层级复杂表单的操作（添加与回显）之添加功能实现
Posted 穆雄雄
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element ui实现多层级复杂表单的操作（添加与回显）之添加功能实现相关的知识，希望对你有一定的参考价值。
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂
前言
现在是2022年5月3日13:35:15！文接上篇。[element ui实现多层级复杂表单的操作（添加与回显）之表单操作交互操作](element ui实现多层级复杂表单的操作（添加与回显）之表单操作交互操作_穆雄雄的博客-CSDN博客)
上篇文章主要写了纯页面端的交互，包括一些判断，本篇文章我们来看看具体的功能实现。
实现代码
在做这块儿的时候，原来想的是，直接在元素个数的改变事件里把form的值赋上。直到最后，我发现元素个数后面还有个表单，一直没有赋值上，才觉得错了。
因为元素个数的表单改变完了之后，才去选择的后面的表单，所以值就赋不上，于是就想了个办法，在点击保存按钮的时候，给form中赋值。
下面是保存按钮的点击事件：
//保存的按钮
rowSavesBtn()
//采集数据类型
this.form.deviceData = '';
for(var i = 0;i< this.deviceDataCheck.length;i++)
this.form.deviceData+= this.deviceDataCheck[i]+",";
this.form.deviceData = this.form.deviceData.toString();
//配置信息的集合
this.form.dataSourseConfigList = [];
//直接将采集数据类型的这一堆 扔到集合里面
this.form.dataSourseConfigList=this.formList;
//清空
this.deviceDataList=[];
//
for(var i = 0;i<this.attribute.length;i++)
var dList =
deviceData: this.deviceDataCheck[i],
samplingFrequency:this.samplingFrequency[i],
schemeOfDataSourceType:this.schemeOfDataSourceType[i],
countOfCompound:this.countOfCompound[i],
measurePeriodExist:this.measurePeriodExist[i],
;
this.deviceDataList.push(dList);
this.form.deviceDataList = this.deviceDataList;
//验证sdk包名是否争取
getDeviceByPackage(this.form.deviceSdkPackage).then((res) =>
var code = res.data.msg;
if (code != "1")
//验证通过了
this.$message(
type: "error",
message: "SDK包名已使用，请重新更换!",
);
return false;
//调用添加的方法
addDeviceNew(this.form).then(res=>
this.$message(
type: "success",
message: "操作成功!",
);
//告诉父组件，我这边操作完了
this.$emit( 'addDeviceResult' , true);
,error =>
this.$message(
type: "error",
message: "操作失败!",
);
//告诉父组件，我这边操作完了
this.$emit( 'addDeviceResult' , false);
);
);
,
代码不详说，基本上都有注释。提交到后端的数据格式是这样的。
"deviceData": "雄雄,的小课堂,",
"dataSourseConfigList": [
[
"dataSourceType": "232342",
"unitCode": "4354",
"dataType": "1",
"metricSpec": "3"
],
[
"dataSourceType": "6543",
"unitCode": "54654",
"dataType": "3",
"metricSpec": "1"
,
"dataSourceType": "4343",
"unitCode": "2643434338",
"dataType": "1",
"metricSpec": "43"
]
],
"deviceDataList": [
"deviceData": "2e",
"samplingFrequency": 100,
"schemeOfDataSourceType": "re",
"countOfCompound": 1,
"measurePeriodExist": "1"
,
"deviceData": "dss",
"samplingFrequency": 200,
"schemeOfDataSourceType": "ds",
"countOfCompound": 2,
"measurePeriodExist": "1"
],
"name": "雄雄的小课堂",
"englishName": "雄雄的小课堂",
"deviceManufacturer": "雄雄的小课堂",
"deviceSdkPackage": "com.lifeteam.farbeat.雄雄的小课堂",
"deviceCommonName": "雄雄的小课堂",
"certificateId": "zhnegshubianhao",
"deviceDesc": "描述描述穆雄雄的博客。雄雄的小课堂"
按照请求的json格式数据，创建对应的实体类，然后在后台控制器中操作。这里因为业务的不一样，所以控制器中的代码可能也不尽相同。
我的业务是在添加设备的时候，还需要添加配置信息到库里面，下面是控制器中的代码：
/**
* 新添加的方法 2022年5月1日19:50:36
* 1.添加
* 2.遍历集合，将信息添加到配置文件里面去
* @param device
* @return
*/
@PostMapping("/addDeviceNew")
@ApiOperationSupport(order = 6)
@ApiOperation(value = "新增或修改", notes = "传入device")
public R addDeviceNew(@Valid @RequestBody Device device)
//将设备可采集的数据类型最后的逗号截取掉
String deviceData = device.getDeviceData().substring(0,device.getDeviceData().length()-1);
device.setDeviceData(deviceData);
device.setUserId(AuthUtil.getUserId());
device.setUsername(AuthUtil.getUserName());
//审核状态是 ：待提交
device.setExamineStatus(0);
//获取
device.setEnterpriseName(clientUserService.getByUserId(AuthUtil.getUserId()).getEnterpriseName());
//添
deviceService.save(device);
//遍历
List<List<DataSourceConfig>> dataSourseConfigList = device.getDataSourseConfigList();
for (int i = 0;i<dataSourseConfigList.size();i++)
List<DataSourceConfig> objList = dataSourseConfigList.get(i);
String dataCollectionType= device.getDeviceDataList().get(i).getDeviceData();
Integer samplingFrequency = device.getDeviceDataList().get(i).getSamplingFrequency();
String schemeOfDataSourceType = device.getDeviceDataList().get(i).getSchemeOfDataSourceType();
//
Integer measurePeriodExist = device.getDeviceDataList().get(i).getMeasurePeriodExist();
Integer countOfCompound= device.getDeviceDataList().get(i).getCountOfCompound();
//
String dataSourceType = "";
String unitCode = "";
String dataType = "";
//
String metricSpec = "";
for(int j = 0;j<objList.size();j++)
dataSourceType += objList.get(j).getDataSourceType()+",";
unitCode += objList.get(j).getUnitCode()+",";
dataType+=objList.get(j).getDataType()+",";
metricSpec+=objList.get(j).getMetricSpec()+",";
DataSourceConfig dataSourceConfig = new DataSourceConfig();
dataSourceConfig.setDeviceId(device.getId());
dataSourceConfig.setDeviceName(device.getDeviceCommonName());
datasourceConfig.setDataCollectionType(dataCollectionType);
dataSourceConfig.setSamplingFrequency(samplingFrequency);
dataSourceConfig.setSchemeOfDataSourceType(schemeOfDataSourceType);
dataSourceConfig.setCountOfCompound(countOfCompound);
dataSourceConfig.setMeasurePeriodExist(measurePeriodExist);
dataSourceConfig.setBasePackage(device.getDeviceSdkPackage());
dataSourceConfig.setDataSourceId( Math.abs((System.currentTimeMillis())));
dataSourceConfig.setDataSourceType(dataSourceType.substring(0,dataSourceType.length()-1));
dataSourceConfig.setUnitCode(unitCode.substring(0,unitCode.length()-1));
dataSourceConfig.setDataType(dataType.substring(0,dataType.length()-1));
dataSourceConfig.setMetricSpec(metricSpec.substring(0,metricSpec.length()-1));
dataSourceConfigService.save(dataSourceConfig);
return R.status(true);
以上就是整个功能的实现，基本上都有注释，代码不详细说明了。
以上是关于element ui实现多层级复杂表单的操作（添加与回显）之添加功能实现的主要内容，如果未能解决你的问题，请参考以下文章