又接到新需求了吧~~
背景
在一個大表單里，有可能會出現這種需求，用戶可以自己操作動態添加、移除表單，更加個性化的效果。
常見于填寫個人信息、附加內容的表單
例如：
“工作經歷”可以用戶自己點擊繼續添加按鈕，在原有的表單后面 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>寫在后面
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
