vue 页面使用两套el-form表单并且嵌套使用el-checkbox
2024-06-27 20:24:36
由于项目中需要在页面内使用两套form表单，并且在表单前面加上复选框checkbox，用来替换另一个表单中的数据。
此时使用el-checkbox的change方法进行动态显示替换另一套form中的数据
新数据如下：
<el-form :model="formNew" size="mini"><el-form-item label="合同号(新)" :label-width="formLabelWidth"><el-checkboxv-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-checkboxv-model="checked.checke2"@change="handleChange('projectCode', $event)"><el-inputv-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-inputv-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-inputv-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-inputv-model="formNew.fscProductType"autocomplete="off"></el-input></el-form-item><el-form-itemlabel="【调整】签订产品(新)":label-width="formLabelWidth"><el-inputv-model="formNew.adjustProduct"autocomplete="off"></el-input></el-form-item><el-form-itemlabel="【调整】售卖产品数量(新)":label-width="formLabelWidth"><el-inputv-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-inputv-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-inputv-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-inputv-model="formOld.fscProductType"autocomplete="off"></el-input></el-form-item><el-form-item label="【调整】签订产品" :label-width="formLabelWidth"><el-inputv-model="formOld.adjustProduct"autocomplete="off"></el-input></el-form-item><el-form-itemlabel="【调整】售卖产品数量":label-width="formLabelWidth"><el-inputv-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 页面使用两套el-form表单并且嵌套使用el-checkbox相关推荐
- 前端学习（3004）：vue+element今日头条管理--使用form表单
- html表单怎么设置编码,form 表单 设置编码和页面编码
var isIE=!!window.ActiveXObject; if(isIE && document.charset!="utf-8")location.rel ...
- uni-app.02.提交form表单的两种方式
提交form表单的两种方式 uni-app提交form表单的两种方式 form表单元素较少 前端代码举例 后端代码举例 form表单元素较多 前端代码举例: 后端java代码举例 uni-app提交f ...
- jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- django-演练-添加老师-form表单方式添加
目标 从老师列表页,通过一个链接,进入一个新的页面 新页面主要内容是一个form表单 文本框中输入老师的姓名 下拉框中选择老师所带的班级(可多选) 技术点 下拉框的多选 multiple属性 提交一个 ...
- 常见的Form表单提交方式
Form表单提交方式探究 在进行项目编程的时候,我们难免会去编写一些简单的前端页面. 而编写前端页面就力不开 form表单的支持. 下面就form表单的提交方式进行如下探寻 1.常规写法 在form表 ...
- 如何提交form表单嵌套（提交表单外的数据方法 ）
如何提交form表单嵌套,form表单不能嵌套使用! 解决思路:将嵌套的form表单提取到最外层,将表单外要提交的数据,提交随表单提交而提交! 方法如下: <form action=" ...
- vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
- 用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
最新文章
- Centos7 ocsp功能验证
- 2. getline()和get()
- Android顶部粘至视图具体解释
- CSS兼容IE/Firefox要点
- 前端防抖和节流合二为一
- 百年 IBM 终于 All In 人工智能和混合云！
- 编程开发之--单例模式（2）
- 面向对象设计时需要“六化”设计人员
- 计算机应用超期,电脑程序数字签名过期怎么办
- 181212每日一句
- 如何在 Web 前端做 3D 音效处理
- 小米max刷鸿蒙,小米Max刷recovery教程 小米Max第三方recovery下载
- python课设参考文献_Python课程设计任务书
- 计算机一级最强大脑,计算机入侵人类 《最强大脑》选手完败？
- python + selenium + chrome 凡人修仙小说爬取
- matinee和matin区别_【近义词辨析】An和Année, Jour和Journée如何区别
- Java基础知识点总结（面试版）
- java毕业设计坝上长尾鸡养殖管理系统Mybatis+系统+数据库+调试部署
- springboot集成artemis
- mysql备份数据库的命令