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 中动态实现进度条,基本上有两种常见的方法：直接通过 Vue 数据绑定控制样式,或者利用外部库来实现更复杂的功能,我们会深入探讨这两种方式,并且详细说明每种方法的实现步骤、优缺点以及使用场景,需要的朋友可以参考下2025-07-07
Vue是一套用于构建用户界面的渐进式框架,它的核心库只关注视图层,易于上手,也便于与其他库或已有项目整合,下面这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,需要的朋友可以参考下2023-05-05
在当今前端开发的领域中,Vue 框架因其高效和灵活的特性备受开发者青睐,而 Vant 是一个轻量的移动端组件库,为 Vue 应用的开发提供了丰富且便捷的功能组件,本文将就如何在 Vue 框架中通过 Vant 来实现日期选择器的使用,需要的朋友可以参考下2024-08-08
Axios 是 Javascript 中最受欢迎的 HTTP 库之一，我们可以用它在 Vue 程序中调用API。在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用，可以用这个小程序学习英语，同时也能从侃爷的话中得到一些启发，而且还可以学习用 Vue 异步请求API，一举多得，何乐而不为呢？2021-05-05
这篇文章主要为大家详细介绍了Vues实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue 按钮 权限控制，在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限，必须当有删除权限时，就显示删除按钮，下面我们就来了解一下具体的解决方法,需要的朋友也可以参考一下2021-12-12
本文主要介绍了element中form组件prop嵌套属性的问题解决，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本文通过实例代码给大家讲解vue.js树形组件之删除双击增加分支功能，非常不错，具有参考借鉴价值，需要的的朋友参考下2017-02-02
文章总结了async-validator文档中校验不通过的原因,主要是由于type类型不匹配,文章详细列举了不同类型数据（如number、array等）的校验方法,并提供了具体的示例,感兴趣的朋友一起看看吧2026-02-02
最近在做车辆模拟地图,在实现控制站点名称按需显示,下面通过本文给大家分享vue3实现模拟地图站点名称按需显示的功能,感兴趣的朋友跟随小编一起看看吧2024-06-06
最新评论