vue+elementUI使用rules 国际化时 form表单验证信息不能实时更新

vue+elementUI使用rules 国际化时 form表单验证信息不能实时更新

在切换语言的时候不能实时更新表单验证信息

方法一：用computed计算属性

    computed:{
      rules(){   //这个rules是自己起的名字 :rules="rules"
          return{
            username:[
                // 请输入用户名
              { required:true, message: this.$t('menu.slDeparPlace'), trigger:'blur'}
            ],
            password: [
                // 请输入密码
                { required: true, message: this.$t('menu.pwPlace'), trigger: 'blur' }
            ]
    
          }
      }
    },

但是我发现此方法很不好的一点是 我打开页面就已经开始验证了 一片红不好看，我们是点击登录之后开始验证

方法二：放入行内

:rules="[{ required:true, message: this.$t(‘menu.slDeparPlace’), trigger:‘blur’}]"

<el-form :model="param" :rules="rules" v-show="flag==1" ref="param" label-width="0px" class="ms-content">
    <div>
         <el-form-item prop="username" 
         :rules="[{ required:true, message: this.$t('menu.slDeparPlace'), trigger:'blur'}]"
         >
             <el-input v-model="param.username" :placeholder="$t('menu.userName')">
                 <span slot="prepend" icon="el-icon-lx-people"></span>
             </el-input>
         </el-form-item>
         
         <el-form-item prop="password"
         :rules="[{ required:true, message: this.$t('menu.pwPlace'), trigger:'blur'}]"
         >
             <el-input
                 :placeholder="$t('menu.password')"
                 v-model="param.password"
                 @keyup.enter.native="submitForm('param')"
             >
                 <span slot="prepend" icon="el-icon-lx-lock"></span>
             </el-input>
         </el-form-item>
     </div>

 </el-form>

最后在data中定义一下 rules:{} 即可