elementui prop 动态验证

Question

 <!-- 需要一个动态的input 可以让用户根据不同资料填写,  -->  <!-- useCustom  是一个动态数组里面 a, b, c, -->    <div v-for="(uc, index) in useCustom" :key="index">      <el-form-item >         <!-- msgShopName是个对象,  通过拿到uc值 来动态渲染出input框 a框, b框, c框-->         <el-input v-model="msgForm.msgShopName[uc]" :placeholder="uc" style="margin-left: 4px; width: 200px" required></el-input>         </el-form-item>    </div>我的需求很简单, 为每个动态渲染出来的 input 增加验证,让他变成必填...1.简单试过在input 框上 直接写上required, 来让input框变成必填, 结果无效. 2.试过直接增加rules 规则. 不过效果不好,验证不准确.我遇到的问题是: prop 一般要与 被验证的控件 一致, 但我这边因为 被验证的控件msgShopName是不固定的,让prop不能与msgShopName保持一致.变成无法控制到.问题出现的环境背景及自己尝试过哪些方法相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

看你代码 useCustom循环出来的uc不就是对象的属性名吗？提前配置好全部rules，直接把uc给el-form-item当作prop不行吗？
或者也可以比较傻的直接把rules定义在循环中的el-form-item上

<el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >

刚抽空按你逻辑写了段测试代码，是可行的，能正常验证

template

<el-form :model="msgForm.msgShopName">
  <div v-for="(uc, index) in useCustom" :key="index">
    <el-form-item
        :prop="uc"
        :rules="[ { required: true, trigger: 'blur' } ]">
      <!-- msgShopName是个对象,  通过拿到uc值 来动态渲染出input框 a框, b框, c框-->
      <el-input v-model="msgForm.msgShopName[uc]" :placeholder="uc" style="margin-left: 4px; width: 200px"></el-input>
    </el-form-item>
  </div></el-form>

script

export default {
  data() {
    return {
      useCustom: ['name', 'mobile'],
      msgForm: {
        msgShopName: {}
      },
    }
  }
}