Element-ui表单验证（二）

业务场景

• 新增一个字段，该字段对应多个输入框，该字段属性动态获取，对该字段进行动态校验

解决措施

• data中定义，发送请求，为该字段进行属性初始化

return {
      language: this.$store.getters.language,
      loading: false, // 加载动画
      info: {
        // 基本信息
        name: '', // 系统接口名称
        languageInterfaceName: {}, // 接口名称中英文 (需)
        ...     
    },
};

  created() {
    this.getLanguageType();
  },
  getLanguageType() {
      getLang('') // 获取多语言
      .then(response => {
        const obj = {};
        response.data.list.forEach(val => {
          const prop = val.language; // en
          obj[prop] = '';
        });
        this.info.languageInterfaceName = obj;
      })
      .catch(error => {
        console.log(error);
      });
    }

• 定义结构

<!-- 多语言接口名称 -->
<el-form-item :label="'多语言接口名：'+key"
    v-for="(value, key, index) in this.info.languageInterfaceName"
    :key="index" :prop="`languageInterfaceName.${key}`" :rules="rules.language1">
    <el-input class="MW300" v-model="info.languageInterfaceName[key]" placeholder="请输入"></el-input>
</el-form-item>

• 自定义校验

rules: {
    language1: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ]
}

效果

踩坑

• 直接暴力修改属性，导致数据绑定不上

　　即写 getLanguageType() 方法时，直接使用 this.info.languageInterfaceName[key] 方式 给其增加属性，导致vue绑定不上

• 不懂 prop 跟 rules
  • prop：form里面的校验只能校验到form绑定的值的第一层，即假如，form上写的为 :model="info",只能绑定到 info.xxxx,诸如上述的 info.xxx.yy这种需要进行自定义
  • :prop="'languageInterfaceName.'+key"（与上述方式一样，相当于简化了字符串拼接操作）
  • rules：如果是自定义的校验，需要rules精确指定具体的检验，比如将language1写在rules下，就要写成 :rules = “rules.language1”