vue頁面使用兩套el-form表單并嵌套使用el-checkbox方式
更新時間：2026年02月11日 08:39:53 作者：m0_60907575
文章介紹了在Vue項目中使用兩套`el-form`表單并嵌套使用`el-checkbox`的場景,通過`el-checkbox`的`change`方法動態(tài)顯示并替換另一套表單中的數(shù)據(jù),作者分享了個人經(jīng)驗,希望對大家有所幫助
vue使用兩套el-form表單并嵌套使用el-checkbox
由于項目中需要在頁面內(nèi)使用兩套form表單，并且在表單前面加上復選框checkbox，用來替換另一個表單中的數(shù)據(jù)。
此時使用el-checkbox的change方法進行動態(tài)顯示替換另一套form中的數(shù)據(jù)
新數(shù)據(jù)如下
<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="訂單狀態(tài)(新)" :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="簽約方業(yè)務類型(新)" :label-width="formLabelWidth">
<el-input v-model="formNew.entityType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="代理商簽約狀態(tài)(新)" :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="產(chǎn)品類型(新)" :label-width="formLabelWidth">
<el-input
v-model="formNew.fscProductType"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item
label="【調(diào)整】簽訂產(chǎn)品(新)"
:label-width="formLabelWidth"
>
<el-input
v-model="formNew.adjustProduct"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item
label="【調(diào)整】售賣產(chǎn)品數(shù)量(新)"
:label-width="formLabelWidth"
>
<el-input
v-model="formNew.adjustProductCount"
autocomplete="off"
></el-input>
</el-form-item>
</el-form>舊數(shù)據(jù)
<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="訂單狀態(tài)" :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="簽約方業(yè)務類型" :label-width="formLabelWidth">
<el-input v-model="formOld.entityType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="代理商簽約狀態(tài)" :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="產(chǎn)品類型" :label-width="formLabelWidth">
<el-input
v-model="formOld.fscProductType"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="【調(diào)整】簽訂產(chǎn)品" :label-width="formLabelWidth">
<el-input
v-model="formOld.adjustProduct"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item
label="【調(diào)整】售賣產(chǎn)品數(shù)量"
: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: ''
}
}
},最最關(guān)鍵的是
methods: {
handleChange(field, val) {
if (val) {
this.formOld[field] = this.formNew[field]
} else {
this.formOld[field] = this.formTmp[field]
}
}
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
在 Vue 中動態(tài)實現(xiàn)進度條,基本上有兩種常見的方法：直接通過 Vue 數(shù)據(jù)綁定控制樣式,或者利用外部庫來實現(xiàn)更復雜的功能,我們會深入探討這兩種方式,并且詳細說明每種方法的實現(xiàn)步驟、優(yōu)缺點以及使用場景,需要的朋友可以參考下2025-07-07
Vue是一套用于構(gòu)建用戶界面的漸進式框架,它的核心庫只關(guān)注視圖層,易于上手,也便于與其他庫或已有項目整合,下面這篇文章主要給大家介紹了關(guān)于如何運行vue項目的相關(guān)資料,需要的朋友可以參考下2023-05-05
在當今前端開發(fā)的領(lǐng)域中,Vue 框架因其高效和靈活的特性備受開發(fā)者青睞,而 Vant 是一個輕量的移動端組件庫,為 Vue 應用的開發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過 Vant 來實現(xiàn)日期選擇器的使用,需要的朋友可以參考下2024-08-08
Axios 是 Javascript 中最受歡迎的 HTTP 庫之一，我們可以用它在 Vue 程序中調(diào)用API。在本文中我們用 Vue 3 和 Axios 寫一個侃爺語錄小應用，可以用這個小程序?qū)W習英語，同時也能從侃爺?shù)脑捴械玫揭恍﹩l(fā)，而且還可以學習用 Vue 異步請求API，一舉多得，何樂而不為呢？2021-05-05
這篇文章主要為大家詳細介紹了Vues實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue 按鈕 權(quán)限控制，在日常項目中，會碰到需要根據(jù)后臺接口返回的數(shù)據(jù)，來判斷當前用戶的操作權(quán)限，必須當有刪除權(quán)限時，就顯示刪除按鈕，下面我們就來了解一下具體的解決方法,需要的朋友也可以參考一下2021-12-12
本文主要介紹了element中form組件prop嵌套屬性的問題解決，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文通過實例代碼給大家講解vue.js樹形組件之刪除雙擊增加分支功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
文章總結(jié)了async-validator文檔中校驗不通過的原因,主要是由于type類型不匹配,文章詳細列舉了不同類型數(shù)據(jù)（如number、array等）的校驗方法,并提供了具體的示例,感興趣的朋友一起看看吧2026-02-02
vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能(車輛模擬地圖)
最近在做車輛模擬地圖,在實現(xiàn)控制站點名稱按需顯示,下面通過本文給大家分享vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能,感興趣的朋友跟隨小編一起看看吧2024-06-06