关于表单验证:vue-element嵌套表单验证

在 vue2 搭配 elementUI 中, 如果是动静表单中须要表单验证，官网文档的解决办法

https://element.eleme.cn/#/zh…

<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>

如果是多层表单互相嵌套，也是相似的思路 举例 1 https://segmentfault.com/a/11…
举例 2 https://www.cnblogs.com/shy17…

然而 如果多层便当便当嵌套的 el-form-item 不法则的便当生成（子组件并向生成多个 el-form-item）, 不法则的动静验证，那么每一个 el-form-item 中的 ” :prop=”‘domains.’ + index + ‘.value'” 的 prop 就很容易报错, 或者找不到对应的 path，很麻烦

一个比拟简便的写法
html

<!– 只有以后表单组件最终渲染在父组件外部 –>

<el-form-item prop="testRules" :rules="testRules(' 本人传参 ')" >
            <el-input
              v-model.trim="test"
              placeholder="请输出"
        />
    </el-form-item>

js

// 能够间接放在 data 外面
testRules: (data) => {
   return [
      {validator:(rule, value, callback) => {if(!data){
                // 验证不通过
                callback(new Error('！表单验证'));  
                }   
                // 验证通过
                callback();},
            trigger: 'blur'
      }
   ];
}

这样子写 就能够省下来:prop=”‘domains.’ + index + ‘.value'” 拼接的那一大堆