element-ui里，对于通过v-for渲染的el-form-item组件，是否有方法使用自带的表单验证？

Question

element-ui里，对于通过v-for渲染的el-form-item组件，是否有方法使用自带的表单验证？

官方文档对保单验证功能的描述在此处：http://element-cn.eleme.io/#/...

在官方文档中，所举的例子都是单个组件，如果使用 v-for ，则 prop 属性处出现了变量
例如:

<el-form-item class="form-half" v-for="(param, index) in editorData['params']" prop="params[index]['value']" :label="param.name" :key="param.name">
          <el-select v-model="param.value" placeholder="Select param">
            <el-option v-for="choice in param.range" :value="choice" :key="choice"></el-option>
          </el-select>
</el-form-item>

这种写法是失效的。因为 prop 里貌似只能填一个固定的路径值。那么这里 prop 属性该怎么写，是不是无法使用？

Answer 1

正确写法应该是 :prop="`params.${index}.value`" 或者 :prop="'params.'+index+'.value'"
rules写在<el-form-item>标签中

element-ui官方文档表单验证中的 动态增减表单项 中有提及v-for情况下的表单验证，下面贴上demo代码

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>

Answer 2

看一下文档：http://element-cn.eleme.io/#/...

<el-form-item

prop="email"
label="邮箱"
:rules="[
  { required: true, message: '请输入邮箱地址', trigger: 'blur' },
  { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]"

直接把rules写到动态的写到标签里边

Answer 3

:prop="params[index]['value']"

Answer 4

正好最近做过这种校验，多段工作经历的例子

<div class="content-inner" :key="index" v-for="(experience, index) in resumeData.workExperiences" >
    <el-form-item :prop="'workExperiences.' + index + '.company'" label="公司" label-position="top" :rules="rules.experienceRule.company">
        <el-input class="input-item" v-model="experience.company"></el-input>
    </el-form-item>
</div>

rules.js代码示例：

export const rules = () => {
    return {
        experienceRule: {
            company: [
                { required: true, message: '公司名不能为空', trigger: 'blur' },
                { min: 1, max: 128, message: '不能超过 128 个字符', trigger: 'change, blur' },
                {  validator: validDangeroutStr, trigger: 'change, blur' }  //validator为自定义校验
            ]
        }
    }
}