element-ui表單驗證無效解決

最近在項目中遇到了一個需求，需要動態增減表單元素，同時給新增的表單元素增加校驗規則。

element-ui官網給出了解決方案：點擊新增按鈕時，向循環渲染的數組中push新的對象，數據驅動視圖，通過增加數據的方式來增加新的dom元素；同樣的，通過刪除循環遍歷的數據來達到刪除dom的效果。

但是，校驗規則不起作用，即使填寫了表單已經提示未填寫。在仔細檢查后發現，element-ui的表單校驗規則中，el-form-item綁定的prop必須和該item下的表單元素綁定的v-model值的名稱一致。但和通常表單不同的是，該表單是動態增減的，對應el-form-item需要綁定的prop值必須帶上遍歷的索引值index:

<el-form ref="..." :model="test">
  <div v-for="(item, index) in test.line" :key="index">
    <el-form-item :prop="'line.'+index+'.value1'" :rules="{...}">
      <el-input v-model="item.value1"></el-input>
    </el-form-item>
    <el-form-item :prop="'line.'+index+'.value2'" :rules="{...}">
      <el-input v-model="item.value2"></el-input>
    </el-form-item>
  <div>
</el-form>

<script>
export default {
  data() {
    return {
      test: {
        ...,
　　　   line: [{
          value1: '',
          value2: ''
        }]
      }
    }
  }
}
</script>

 

完整代碼見element-ui官網的動態增減表單項