想找動態增減tab頁的表單動態驗證示例,網上的文章基本上都是固定多tab頁的驗證,el-form-item的prop書寫格式也極為麻煩,按搜到的文章教程敲了半天,一直報錯prop路徑不對。
最后索性直接在外層套一個div用if來控制dom中只顯示當前選擇的tab頁,這樣el-from-item中就不用:prop外加一大串的復雜路徑拼接,還是用prop就能確定驗證的字段路徑了。
<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">
<!--關鍵代碼,這個div里通過判斷item.show的值來控制只把當前tab頁渲染到dom樹中-->
<div v-if="item.show === true">
<el-form :model="item.request_tab_data" ref="table_url" :rules="rules" >
<!--由于外層有v-if控制dom樹只存在當前tab頁,所以不用:prop,直接用官方示例中的prop-->
<el-form-item prop="url" >
<el-input placeholder="請輸入URL" 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中只存在當前選擇的tab頁
}],
//表單驗證規則
rules: { url: [{ required: true, message: "請輸入URL" }] },
},
methods: {
tj(index,formName) {
this.$refs[formName][0].validate(valid => {
if (valid) {
//業務邏輯...
}
})
}
}
}