使用elementUI動態增減表單項 且 使用自定義校驗

如題，實現過程中遇到問題如下：

1. elementUI動態增減表單項時只能使用行內校驗

2. 自定義校驗在行內如何設置才生效

 

先看下官網上的：

 

 

 

 對比數據結構，注意下prop的寫法。如果你的數據就是個數組，比如：domains：['123', '456', '789']。就要寫成：:prop="'domains.'+index"

 

接下來說說，自定義校驗該如何加：

直接寫在行內是不行的

 

 進行如下修改：

data() {
    var validateHosts = (rule, value, callback) => {    
      if (value === '') {
        // debugger
        callback(new Error('請輸入服務域名！'));
      } else {
        callback();
      }
    };
    return {
        hostRules: {
            required: true, 
            validator: validateHosts, 
            trigger: 'blur'
        }, 
   }
}        

 

---

 

表單結構有嵌套時：

flowForm: {
        flowRuleName: '',
        grade: 1, 
        resourceMode: 0, 
        interval: 1,
        intervalUnit: '0',
        controlBehavior: 0, 
        burst: 0,
        maxQueueingTimeoutMs: 0,
        paramItem:{
            parseStrategy: 0, 
            matchStrategy: 0, 
            fieldName: "", // 數據嵌套，校驗該字段
            pattern: null 
        },
        count: 0  
      },

"paramItem.fieldName": { required: true, message: '必填項', trigger: 'blur' },

<el-form-item label="Header 名稱" key="header" prop="paramItem.fieldName"> //由於多個字段相同，使用key值區分，否則校驗后切換表單會將上一個校驗結果代入當前表單 
  <el-input v-model="flowForm.paramItem.fieldName" placeholder="請輸入" style="width: 90%;"></el-input>
</el-form-item>

<el-form-item label="URL 參數名稱" v-if="flowForm.paramItem.parseStrategy == 3" key="url" prop="paramItem.fieldName">
  <el-input v-model="flowForm.paramItem.fieldName" placeholder="請輸入" style="width: 90%;"></el-input>
</el-form-item>

<el-form-item label="Cookie 名稱" v-if="flowForm.paramItem.parseStrategy == 4" key="cookie" prop="paramItem.fieldName">
  <el-input v-model="flowForm.paramItem.fieldName" placeholder="請輸入" style="width: 90%;"></el-input>
</el-form-item>