关于表单验证: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'" 拼接的那一大堆