想找動(dòng)態(tài)增減tab頁(yè)的表單動(dòng)態(tài)驗(yàn)證示例，網(wǎng)上的文章基本上都是固定多tab頁(yè)的驗(yàn)證，el-form-item的prop書寫格式也極為麻煩逞度，按搜到的文章教程敲了半天，一直報(bào)錯(cuò)prop路徑不對(duì)妙啃。
最后索性直接在外層套一個(gè)div用if來(lái)控制dom中只顯示當(dāng)前選擇的tab頁(yè)档泽，這樣el-from-item中就不用:prop外加一大串的復(fù)雜路徑拼接，還是用prop就能確定驗(yàn)證的字段路徑了揖赴。
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
<!--關(guān)鍵代碼馆匿，這個(gè)div里通過(guò)判斷item.show的值來(lái)控制只把當(dāng)前tab頁(yè)渲染到dom樹(shù)中-->
<div v-if="item.show === true">
<el-form :model="item.request_tab_data" ref="table_url" :rules="rules" >
<!--由于外層有v-if控制dom樹(shù)只存在當(dāng)前tab頁(yè)，所以不用:prop燥滑，直接用官方示例中的prop-->
<el-form-item prop="url" >
<el-input placeholder="請(qǐng)輸入U(xiǎn)RL" v-model="item.request_tab_data.url" class="input-with-select" style="width: 100%" />
</el-form-item>
<el-button type="primary" @click="tj(index,'table_url')">
Run
</el-button>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
<script>
export default {
data () {
editableTabsValue: "1",
editableTabs: [{
title: "Tab 1",
name: "1",
show: false, //控制dom中只存在當(dāng)前選擇的tab頁(yè)
}],
//表單驗(yàn)證規(guī)則
rules: { url: [{ required: true, message: "請(qǐng)輸入U(xiǎn)RL" }] },
},
methods: {
tj(index,formName) {
this.$refs[formName][0].validate(valid => {
if (valid) {
//業(yè)務(wù)邏輯...
}
})
}
}
}
