溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
又接到新需求了吧~~
背景
在一個大表單里，有可能會出現這種需求，用戶可以自己操作動態添加、移除表單，更加個性化的效果。
常見于填寫個人信息、附加內容的表單
例如：
“工作經歷”可以用戶自己點擊繼續添加按鈕，在原有的表單后面 append 多一個表單，不需要就點擊右上方 X 按鈕移除
問題
在實現之前，提出幾個問題
好吧，我當時也思考了一會，最后選擇數組方式，動態渲染
代碼實現講解
利用數組，v-for 循環方式，可以完美實現動態渲染和移除，因為操作的只有對象數組而已
export default {
name: 'vouchersDetail',
data() {
return {
form: {
regionName: '',
regionCode: '',
// 動態添加的對象數組
azList: [
{
azName: '',
logicCode: '',
physicCode: ''
}
]
}
}
},
computed: {
// 至少保留一個動態表單的開關
isShowCloseBtn() {
return this.form['azList'].length > 1
}
},
methods: {
addItem() {
// 點擊添加表單的按鈕，只需要將表單綁定的 value 作為對象 push 到對象數組
this.form['azList'].push({
azName: '',
logicCode: '',
physicCode: '',
weight: ''
})
},
deleteItem(index) {
// 點擊移除表單的按鈕，根據點擊的當前 index 移除對象數組的元素
this.form['azList'].splice(index, 1)
},
goBack() {
window.history.back(-1)
}
}
}
請格外注意動態添加表單的 rule 和 prop
每個動態添加的表單都要加上 rule
prop 需要根據對象數組下標綁定設置對應的 value（:prop="'azList' + index + '.azName'"）
那么對應的 html 形式為
<div class="section-form" v-for="(item, index) in form.azList" :key="index">
<span v-if="isShowCloseBtn" class="close" @click="deleteItem(index)">
<i class="el-icon-close"></i>
</span>
<el-form-item label="可用區名稱："
:rules="[{ required: true, message: '可用區名稱不能為空' }]"
:prop="'azList[' + index + '].azName'"
label-width="150px">
<el-input placeholder="請輸入可用區名稱" v-model="item.azName" :maxlength="30"></el-input>
</el-form-item>
<el-form-item label="邏輯可用區編碼："
:rules="[{ required: true, message: '邏輯可用區編碼不能為空' }]"
label-width="150px"
:prop="'azList[' + index + '].logicCode'">
<el-input placeholder="請輸入唯一ID" v-model="item.logicCode" :maxlength="30"></el-input>
</el-form-item>
<el-form-item label="物理可用區編碼："
:rules="[{ required: true, message: '物理可用區編碼不能為空' }]"
label-width="150px"
:prop="'azList[' + index + '].physicCode'">
<el-input placeholder="請輸入唯一ID" v-model="item.physicCode" :maxlength="30"></el-input>
</el-form-item>
</div>
寫在后面
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
