el-form 中表单 动态prop 的验证

el-form 中 表单动态prop 的验证

某天接到个需求：
1.管理页面数据时，个别字段值需要支持多语言
2.整个页面数据只能是一份

于是就是只能把form中对应的字段改成对象格式

form: any = {
    name: "",
    url: "",
    title: {}
  };

如上代码所示，title字段是一个对象，准备用来放各个语言对应的存储字段

然后语言是可以动态切换的所以我prop就只能配合用语言变量 currentLang 来写

<el-form-item
  label="title"
  :prop="`title.${currentLang}`"
  :rules="rules.titleRule"
>
  <el-input
    size="small"
    v-model="form.title[currentLang]"
  ></el-input>
</el-form-item>

重点看上面的prop 属性值，是form下面的查找路径
例如：
currentLang = “en-us”, 那prop 就是"title.en-us”
currentLang = “zh-cn”, 那prop 就是"title.zh-cn”

再说rules 我的代码其实是

rules = {
...
	titleRule: [
        {
          validator: this.titleValidate,
          trigger: "blur"
        }
      ]
}

// 验证方法
 titleValidate(rule, value, callback) {
   if (value) {
     ...
   } else {
     ...
   }
   callback();
 }

基本按照上面的写法就可以有正常的验证功能了。
其实按照这个就可以类推如果form是数组的情况了，只是把prop中的对象路径改为数组的读取路径就可以了