当前位置: 代码迷 >> 综合 >> Element-UI动态生成表单【包含字典翻译,旧值对比,但绑定动态表单验证待补充】
  详细解决方案

Element-UI动态生成表单【包含字典翻译,旧值对比,但绑定动态表单验证待补充】

热度:12   发布时间:2024-01-20 22:27:59.0

 

控件类型:

        T:文本输入, TA:TextArea,S:下拉选,D:日期控件,N:数字输入,C:复选,R:单选,SW:开关

 vue文件:

          <el-formv-if="formData.length > 0"ref="config":model="params"class="prodetail"label-width="120px"size="small"><el-form-itemv-for="(item,index) in formData":key="index":label="item.labelText":prop="item.paramName"><div v-if="showOldValue=='0'" class="pro"><!--文本输入 T --><el-inputv-if="item.ctrlType==='T'"v-model="item.paramValue":disabled="true"/><!--文本域 TA --><el-inputv-if="item.ctrlType==='TA'"v-model="item.paramValue"type="textarea":rows="3"maxlength="2048":disabled="true"/><!--S:下拉选 --><el-selectv-if="item.ctrlType==='S'"v-model="item.paramValue":disabled="true"><template v-if="item.valueList"><el-optionv-for="dict in getValueList(item.valueList||'')":key="dict.subitem":label="dict.subitemname":value="dict.subitem"/></template><template v-if="item.dictItem"><el-optionv-for="dict in getdict(item.dictItem)":key="dict.dictItem":label="dict.dictItemName":value="dict.dictItem"/></template></el-select><!--D:日期控件 --><el-date-pickerv-if="item.ctrlType==='D'"v-model="item.paramValue"format="yyyy 年 MM 月 dd 日"value-format="yyyy-MM-dd"type="date":disabled="true"></el-date-picker><!--N:数字输入 --><el-input-numberv-if="item.ctrlType==='N'"v-model="item.paramValue":min="0":max="9999":disabled="true"/><!--C:复选 --><el-checkbox-groupv-if="item.ctrlType==='C'"v-model="item.paramValue":disabled="true"><el-checkbox-buttonv-for="ckitem in item.valueList":key="ckitem.subitem":label="ckitem.subitem">{
   { ckitem.subitemname }}</el-checkbox-button></el-checkbox-group><!--R:单选 --><el-radio-groupv-if="item.ctrlType==='R'"v-model="item.paramValue":disabled="true"><el-radio-buttonv-for="dict in item.valueList":key="dict.subitem":label="dict.subitem">{
   { dict.subitemname }}</el-radio-button></el-radio-group><!--SW:开关 --><el-switchv-if="item.ctrlType==='SW'"v-model="item.paramValue":disabled="true"/></div><div v-if="showOldValue=='1'" class="prochange"><!--文本输入 T --><div v-if="item.ctrlType==='T'"><el-inputv-model="item.paramOldValue"maxlength="128":disabled="true"/>=><el-inputv-model="item.paramValue"class="changemsg"maxlength="128":disabled="true"/></div><!--文本域 TA --><div v-if="item.ctrlType==='TA'"><el-inputv-model="item.paramOldValue"type="textarea":rows="3"maxlength="2048":disabled="true"/><span>=></span><el-inputv-model="item.paramValue"type="textarea"class="changemsg":rows="3"maxlength="2048":disabled="true"/></div><!--S:下拉选 --><div v-if="item.ctrlType==='S'"><el-selectv-model="item.paramOldValue":disabled="true"><template v-if="item.valueList"><el-optionv-for="dict in getValueList(item.valueList||'')":key="dict.subitem":label="dict.subitemname":value="dict.subitem"/></template><template v-if="item.dictItem"><el-optionv-for="dict in getdict(item.dictItem)":key="dict.dictItem":label="dict.dictItemName":value="dict.dictItem"/></template></el-select>=><el-selectv-model="item.paramValue"class="changemsg":disabled="true"><template v-if="item.valueList"><el-optionv-for="dict in getValueList(item.valueList||'')":key="dict.subitem":label="dict.subitemname":value="dict.subitem"/></template><template v-if="item.dictItem"><el-optionv-for="dict in getdict(item.dictItem)":key="dict.dictItem":label="dict.dictItemName":value="dict.dictItem"/></template></el-select></div><!--D:日期控件 --><div v-if="item.ctrlType==='D'"><el-date-pickerv-model="item.paramOldValue"format="yyyy 年 MM 月 dd 日"value-format="yyyy-MM-dd"type="date":disabled="true"></el-date-picker>=><el-date-pickerv-model="item.paramValue"class="changemsg"format="yyyy 年 MM 月 dd 日"value-format="yyyy-MM-dd"type="date":disabled="true"></el-date-picker></div><!--N:数字输入 --><div v-if="item.ctrlType==='N'"><el-input-numberv-model="item.paramOldValue":min="0":max="9999":disabled="true"/>=><el-input-numberv-model="item.paramValue"class="changemsg":min="0":max="9999":disabled="true"/></div><!--C:复选 --><div v-if="item.ctrlType==='C'"><el-checkbox-groupv-model="item.paramOldValue":disabled="true"><el-checkbox-buttonv-for="ckitem in item.valueList":key="ckitem.subitem":label="ckitem.subitem">{
   { ckitem.subitemname }}</el-checkbox-button></el-checkbox-group>=><el-checkbox-groupv-model="item.paramValue":disabled="true"><el-checkbox-buttonv-for="ckitem in item.valueList":key="ckitem.subitem":label="ckitem.subitem">{
   { ckitem.subitemname }}</el-checkbox-button></el-checkbox-group></div><!--R:单选 --><div v-if="item.ctrlType==='R'"><el-radio-groupv-model="item.paramOldValue":disabled="true"><el-radio-buttonv-for="dict in item.valueList":key="dict.subitem":label="dict.subitem">{
   { dict.subitemname }}</el-radio-button></el-radio-group>=><el-radio-groupv-model="item.paramValue":disabled="true"><el-radio-buttonv-for="dict in item.valueList":key="dict.subitem":label="dict.subitem">{
   { dict.subitemname }}</el-radio-button></el-radio-group></div><!--SW:开关 --><div v-if="item.ctrlType==='SW'"><el-switchv-model="item.paramOldValue":disabled="true"/>=><el-switchv-model="item.paramValue":disabled="true"/></div></div></el-form-item></el-form>

TS文件:

    //dataformData = [];// 返回全部//method/*** 动态表单获取字典翻译*/getdict(dictnum){return dict$.getOpts(dictnum);}/*** 动态表单获取ValueList的翻译* Str: "0|自动#1|手动"*/getValueList(Str){var valueList = Str.split('#');var returnData = []for(var i=0;i<valueList.length;i++){var listrowdata = valueList[i].split('|');var item={subitem:listrowdata[0],subitemname:listrowdata[1]}returnData.push(item);}return returnData;}/*** 表单数据请求*/async handleClick(row){let nowparam ="";const ret =await httpClient.post(API.qry_pro_funcDetail, nowparam);this.formData=ret.data;};

样式文件:

/deep/ .el-form-item {margin-bottom: 0;padding: 5px 0 10px 20px;line-height: 47px;.pro{/deep/ .el-input{width:83%;}/deep/ .el-select{width:100%;}/deep/ .el-textarea{width:83%;}/deep/ .el-input-number{.el-input{width:100%;}}}.prochange{/deep/ .el-input{width:40%;}/deep/ .el-select{width:40%;.el-input{width:100%;}}/deep/ .el-textarea{width:40%;display: inline-block;vertical-align: middle;}/deep/ .el-input-number{.el-input{width:100%;}}/deep/ .el-checkbox-group {font-size: 0;display: inline-block;vertical-align: middle;}.changemsg{.el-input__inner{color:green;}.el-textarea__inner{color:green;}.el-input__inner{color:green;}.el-input-number{.el-input__inner{color:green;}}}}}

后续还需要考虑加上动态表单验证。

 

  相关解决方案