Vue Element組件動態el-tab嵌套form表單驗證

想找動態增減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) {
          //業務邏輯...
        }
      })
    }
  }
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容