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 循环后的效果如下：