[JavaScript知识库]elementUI form list rule

<tempalte>

<el-form :model="formData" ref="formData" :rules="rules" :inline="true">
    <el-form-item v-for="(item,index) in formData.list" :label="`条件一${index+1}:`">
        <el-form-item :prop="'list.' +index+ '.key'" 
                      :rules="rules.key">
              <el-select v-model="item.key" placeholder="请选择">
                    <el-option label="0" value="0"/>
                    <el-option label="1" value="1"/>
                    <el-option label="2" value="2"/>
                    <el-option label="3" value="3"/>
              </el-select>
    </el-form-item>
    <el-bottom @click="submit">提交</el-bottom>
</el-form>
</tempalte>

<script>

export default {
  name: "strategy",
  data() {
    return {
      formData: {
        list:[{key:''}]
      },
      rules: {
        key: [
          {required: true, message:'不能为空', trigger: ['blur', 'change']},
        ]
      }
    }
  },
  methods:{
     // 保存
     submit() {
         // 获取rules key名列表
         let ruleArr = Object.keys(this.rules);
         let validate = false;
         // 逐个校验,需要统一校验直接使用 this.$refs.formData.validate((valid)=>{})
         for (let i in this.formData.list) {
            for (let ruleName of ruleArr) {
              this.$refs.formData.validateField(`list.${i}.${ruleName}`, (valid) => {
                validate = valid;
              });
              // 校验失败
              if (validate) return;
            }
         }
        // console.log('验证通过')
      }
  }
}

</script>