免费论坛网站大全,wordpress设置静态之后文章打不开,企业官网免费制作,天津seo网络在后台管理系统中#xff0c;涉及到大量表单信息的修改和新增。现在想对模板中代码做一些简单的优化。
1. 使用 v-for 循环简化表单项
可以将表单项的定义提取到一个数组中#xff0c;然后使用 v-for 循环来生成这些表单项。这将减少重复代码#xff0c;提高可维护性。
2… 在后台管理系统中涉及到大量表单信息的修改和新增。现在想对模板中代码做一些简单的优化。
1. 使用 v-for 循环简化表单项
可以将表单项的定义提取到一个数组中然后使用 v-for 循环来生成这些表单项。这将减少重复代码提高可维护性。
2. 统一样式和属性
如果多个表单项使用相同的样式或属性可以考虑将这些样式和属性提取到一个对象中以便于管理。
3. 使用计算属性
对于一些简单的逻辑比如根据 editForm.type 显示不同的文本可以使用计算属性来简化模板中的逻辑。
原代码 el-formrefeditForm:modeleditForm:rulesrules:inlinetruelabel-width115pxsizesmallel-form-item :sizesize label投放物料 propmaterialNameel-inputv-modeleditForm.materialNameclasseditItemplaceholder请选择readonlystylewidth: 300pxel-buttonslotappendiconel-icon-searchclickselectMaterial/el-button/el-input/el-form-itemel-form-item :sizesize label物料单位 propunitNameel-inputv-modeleditForm.unitNameclasseditItemreadonlystylewidth: 100px/el-input/el-form-itemel-form-item :sizesize label物料批号 propbatchNumberel-input v-modeleditForm.batchNumber classeditItem readonly/el-input/el-form-itemel-form-item :sizesize label投放数量 propquantityel-input-numberv-modeleditForm.quantity:precision4:step1:min0classeditItem/el-input-number/el-form-itemel-form-item :sizesize label投放时间 propfeedingTimeel-date-pickerv-modeleditForm.feedingTimetypedatetimeplaceholder选择投放时间default-time12:00:00value-formatyyyy-MM-dd HH:mm:ssclasseditItem/el-date-picker/el-form-itemel-form-item :sizesize label投放类型 proptypeel-selectdisabledv-modeleditForm.typeplaceholder请选择classeditItemel-optionv-foritem in typeOption:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-itemel-form-item :sizesize label流转单号 propcirculationNoel-inputv-modeleditForm.circulationNostylewidth: 225pxplaceholder请选择readonlyel-buttonslotappendiconel-icon-searchclickselectCirculation/el-button/el-input/el-form-itemel-form-item :sizesize label产品编码el-input v-modeleditForm.code readonly stylewidth: 225px/el-input/el-form-itemel-form-item :sizesize label产品图号el-inputv-modeleditForm.drawingNumberreadonlystylewidth: 150px/el-input/el-form-itemel-form-item :sizesize label产品型号el-input v-modeleditForm.model classeditItem readonly/el-input/el-form-itemel-form-item :sizesize label产品规格el-inputv-modeleditForm.specificationsclasseditItemreadonly/el-input/el-form-itemel-form-item :sizesize label产品尺寸el-input v-modeleditForm.size classeditItem readonly/el-input/el-form-itemel-form-item label备注 propremarkel-inputv-modeleditForm.remarktypetextareaplaceholder请输入备注stylewidth: 850px//el-form-itemdiv styleclear: both/div/el-form
更改后
el-formrefeditForm:modeleditForm:rulesrules:inlinetruelabel-width115pxsizesmallel-form-itemv-for(item, index) in formItems:keyindex:sizesize:labelitem.label:propitem.propcomponent:isitem.componentv-modeleditForm[item.prop]v-binditem.attrsclasseditItemtemplate v-ifitem.component el-input #appendel-buttonv-ifitem.isSearchiconel-icon-searchclickitem.searchMethod/el-button/template/component/el-form-itemel-form-item label备注 propremarkel-inputv-modeleditForm.remarktypetextareaplaceholder请输入备注stylewidth: 850px//el-form-itemdiv styleclear: both/div/el-form
js data() {return {size: small,vis: false,formItems: [{label: 投放物料,prop: materialName,component: el-input,attrs: {placeholder: 请选择,readonly: true,style: { width: 300px },},isSearch: true,searchMethod: this.selectMaterial,},{label: 物料单位,prop: unitName,component: el-input,attrs: {readonly: true,style: { width: 100px },},},{label: 物料批号,prop: batchNumber,component: el-input,attrs: {readonly: true,},},{label: 投放数量,prop: quantity,component: el-input-number,attrs: {precision: 4,step: 1,min: 0,},},{label: 投放时间,prop: feedingTime,component: el-date-picker,attrs: {type: datetime,placeholder: 选择投放时间,defaultTime: 12:00:00,valueFormat: yyyy-MM-dd HH:mm:ss,},},{label: 投放类型,prop: type,component: el-select,attrs: {disabled: true,placeholder: 请选择,},},{label: 流转单号,prop: circulationNo,component: el-input,attrs: {placeholder: 请选择,readonly: true,style: { width: 225px },},isSearch: true,searchMethod: this.selectCirculation,},{label: 产品编码,prop: code,component: el-input,attrs: {readonly: true,style: { width: 225px },},},{label: 产品图号,prop: drawingNumber,component: el-input,attrs: {readonly: true,style: { width: 150px },},},{label: 产品型号,prop: model,component: el-input,attrs: {readonly: true,},},{label: 产品规格,prop: specifications,component: el-input,attrs: {readonly: true,},},{label: 产品尺寸,prop: size,component: el-input,attrs: {readonly: true,},},],descriptionItems: [],};},
表单项数组通过 formItems 数组定义表单项使用 v-for 循环生成表单项减少了重复代码。组件动态渲染使用 component 标签动态渲染不同的表单组件增强了灵活性。
