vue页面使用两套el-form表单并嵌套使用el-checkbox方式
作者：m0_60907575
文章介绍了在Vue项目中使用两套`el-form`表单并嵌套使用`el-checkbox`的场景,通过`el-checkbox`的`change`方法动态显示并替换另一套表单中的数据,作者分享了个人经验,希望对大家有所帮助
vue使用两套el-form表单并嵌套使用el-checkbox
由于项目中需要在页面内使用两套form表单，并且在表单前面加上复选框checkbox，用来替换另一个表单中的数据。
此时使用el-checkbox的change方法进行动态显示替换另一套form中的数据
新数据如下
<el-form :model="formNew" size="mini">
<el-form-item label="合同号(新)" :label-width="formLabelWidth">
<el-checkbox
v-model="checked.checke1"
@change="handleChange('contractCode', $event)"
>
<el-input v-model="formNew.contractCode"></el-input>
</el-checkbox>
</el-form-item>
<el-form-item label="项目编号(新)" :label-width="formLabelWidth">
<el-checkbox
v-model="checked.checke2"
@change="handleChange('projectCode', $event)"
>
<el-input
v-model="formNew.projectCode"
autocomplete="off"
></el-input>
</el-checkbox>
</el-form-item>
<el-form-item label="公司名称(新)" :label-width="formLabelWidth">
<el-input v-model="formNew.accountName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="项目名称(新)" :label-width="formLabelWidth">
<el-input
v-model="formNew.opportunityName"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="最终用户(新)" :label-width="formLabelWidth">
<el-input v-model="formNew.lastUser" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="签订日期(新)" :label-width="formLabelWidth">
<el-input v-model="formNew.signDate" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="订单状态(新)" :label-width="formLabelWidth">
<el-input v-model="formNew.poStatus" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="合同类型(新)" :label-width="formLabelWidth">
<el-input
v-model="formNew.contractType"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="签约方业务类型(新)" :label-width="formLabelWidth">
<el-input v-model="formNew.entityType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="代理商签约状态(新)" :label-width="formLabelWidth">
<el-input v-model="formNew.signStatus" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="签约类型(新)" :label-width="formLabelWidth">
<el-input v-model="formNew.signType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="产品类型(新)" :label-width="formLabelWidth">
<el-input
v-model="formNew.fscProductType"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item
label="【调整】签订产品(新)"
:label-width="formLabelWidth"
>
<el-input
v-model="formNew.adjustProduct"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item
label="【调整】售卖产品数量(新)"
:label-width="formLabelWidth"
>
<el-input
v-model="formNew.adjustProductCount"
autocomplete="off"
></el-input>
</el-form-item>
</el-form>旧数据
<el-form :model="formOld" size="mini">
<el-form-item label="合同号" :label-width="formLabelWidth">
<el-input v-model="formOld.contractCode"></el-input>
</el-form-item>
<el-form-item label="项目编号" :label-width="formLabelWidth">
<el-input v-model="formOld.projectCode" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="公司名称" :label-width="formLabelWidth">
<el-input v-model="formOld.accountName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="项目名称" :label-width="formLabelWidth">
<el-input
v-model="formOld.opportunityName"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="最终用户" :label-width="formLabelWidth">
<el-input v-model="formOld.lastUser" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="签订日期" :label-width="formLabelWidth">
<el-input v-model="formOld.signDate" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="订单状态" :label-width="formLabelWidth">
<el-input v-model="formOld.poStatus" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="合同类型" :label-width="formLabelWidth">
<el-input
v-model="formOld.contractType"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="签约方业务类型" :label-width="formLabelWidth">
<el-input v-model="formOld.entityType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="代理商签约状态" :label-width="formLabelWidth">
<el-input v-model="formOld.signStatus" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="签约类型" :label-width="formLabelWidth">
<el-input v-model="formOld.signType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="产品类型" :label-width="formLabelWidth">
<el-input
v-model="formOld.fscProductType"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="【调整】签订产品" :label-width="formLabelWidth">
<el-input
v-model="formOld.adjustProduct"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item
label="【调整】售卖产品数量"
:label-width="formLabelWidth"
>
<el-input
v-model="formOld.adjustProductCount"
autocomplete="off"
></el-input>
</el-form-item>
</el-form>export default {
name: 'Popup',
data() {
return {
centerDialogVisible: false,
formLabelWidth: '180px',
checked: {
// checkox选中的属性
checke1: '',
checke2: '',
checke3: '',
checke4: '',
checke5: '',
checke6: '',
checke7: '',
checke8: '',
checke9: '',
checke10: '',
checke11: '',
checke12: '',
checke13: ''
},
formTmp: {
contractCode: '666',
projectCode: '',
accountName: '',
opportunityName: '',
lastUser: '',
signDate: '',
poStatus: '',
contractType: '',
entityType: '',
signStatus: '',
signType: '',
fscProductType: '',
adjustProduct: '',
adjustProductCount: ''
},
formOld: {
contractCode: '666',
projectCode: '',
accountName: '',
opportunityName: '',
lastUser: '',
signDate: '',
poStatus: '',
contractType: '',
entityType: '',
signStatus: '',
signType: '',
fscProductType: '',
adjustProduct: '',
adjustProductCount: ''
},
formNew: {
contractCode: '55',
projectCode: '888',
accountName: '',
opportunityName: '',
lastUser: '',
signDate: '',
poStatus: '',
contractType: '',
entityType: '',
signStatus: '',
signType: '',
fscProductType: '',
adjustProduct: '',
adjustProductCount: ''
}
}
},最最关键的是
methods: {
handleChange(field, val) {
if (val) {
this.formOld[field] = this.formNew[field]
} else {
this.formOld[field] = this.formTmp[field]
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。