vue页面使用两套el-form表单并嵌套使用el-checkbox方式
更新时间：2026年02月11日 08:39:53 作者：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]
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了修改vue源码实现动态路由缓存的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章给大家介绍了通过vue的方式，实现扫码功能，实现步骤分为两步，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2021-11-11
如何使用el-table+el-tree+el-select动态选择对应值
小编在做需求时,遇到了在el-table表格中加入多条数据,并且每条数据要通过el-select来选取相应的值,做到动态选择,下面这篇文章主要给大家介绍了关于如何使用el-table+el-tree+el-select动态选择对应值的相关资料,需要的朋友可以参考下2023-01-01
pm是nodejs的包管理和分发工具,它可以让javascript开发者能够更加轻松的共享代码和共用代码片段,下面这篇文章主要给大家介绍了关于vue脚手架vue-cli卸载与安装的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了关于vue3中的reactive赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了基于Vue3和antDesignVue实现表单校验的方法,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以了解下2024-01-01
vue使用el-table 添加行手动填写数据和删除行及提交保存功能
遇到这样的需求点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存,怎么实现的呢,下面通过实例代码给大家详细讲解,感兴趣的朋友一起看看吧2023-12-12
Vuepress生成文档部署到gitee.io的注意事项及说明
这篇文章主要介绍了Vuepress生成文档部署到gitee.io的注意事项及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue中的按钮绑定事件小案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue如何解决echarts升级后本地无法启动的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最新评论