el-form 循環表單如何做rules ,每次只校驗循環內輸入的單個值

效果：

 

 注意點：紅線內標起來porp 一定要跟  computed  內聲明的名稱一致

 

 

vue:

<el-form ref="form" :model="form" label-width="150px" :inline="true" :rules="ruleForm">

<div v-for="(item,index) in list" :key="index">

<el-form-item label="值" :prop="`submitValue[${index}]`" label-width="100px">
  <el-input v-model="form.submitValue[index]" placeholder="請輸入內容" size="small"
            @blur="blurClick(form.submitValue[index],item.typeList,typeCode[index],index)"
            clearable></el-input>
</el-form-item>

</div>

</el-form>

js:

data() {
  return {
    rules: this.ruleForm,

form: {
  date: this.getNowTime(),
  manageList: '',
  listData: [],
  submitValue: [],//  值(兩個小數)
},

}},

computed: {
  ruleForm() {
    const ruleForm = {};
    this.list.forEach((item, index) => {   //list是頁面form 循環表單的長度進行循環，代表循環生成多個rules名稱
      ruleForm[`submitValue[${index}]`] = [{
        validator: (rule, value, callback) => this.submitValueFun(rule, value, callback, index),
        trigger: 'blur'
      }]
    })
    return ruleForm
  }
},

/////////////////////////////////////////////////////////
computed 循環后的效果如下：