我想知道这种提示el-form表单能否实现？

  • Z时代
  • 2024-02-08
  • 分类：IT

输入框为空没啥问题，问题出在标签名是否重复，重复的精确到lnput框变红提示，以及每行的第二个框的值必须是上一行最后一个框里的值，不是就提示变红，求解？
我想知道这种提示el-form表单能否实现？

回答：

自定义validator这种？自定义校验规则

回答：

可以，用 computed 计算或者用自定义检验规则都可以实现。

计算属性里面可以这样写：

<tempalte>
  <el-form ref="elForm" :model="formData" :rules="formRules" xxx>
    ...
    <el-row v-for="(item,index) in reocrdList">
      <el-col :span="8" >
        <el-form-item :prop="'fieldA-'+index"> ...
        <el-form-item :prop="'fieldB-'+index"> ...
        <el-form-item :prop="'fieldC-'+index"> ...
      </el-col>
    </el-row>
  </el-form>
</tempalte>
<script>
export default {
  ...
  computed:{
    formRules(){
      const { formData, recordList } = this
      return reocrdList.map((item,index)=>{
        return {
          ['fieldA-'+index]:[
             { required: true, message: '请输入xx', trigger: 'blur' },
             { validator: this.checkDuplicate, trigger: 'blur' },
          ],
          ['fieldB-'+index]:[
             { required: true, message: '请输入xx', trigger: 'blur' },
             { min: formData['fieldB-'+index-1]||0 , message: '不可小于xxx', trigger: 'blur' }
          ],
          ['fieldC-'+index]:[
             { required: true, message: '请输入xx', trigger: 'blur' },
             { min: formData['fieldB-'+index]||0 , message: '不可大于xxx', trigger: 'blur' }
          ]
        }
      })
    }
  },
}
</script>

具体情况就看你自己想要怎么写了。不一定非要这样的，但是校验内容就可以这样做。

以上是 我想知道这种提示el-form表单能否实现？ 的全部内容， 来源链接： utcz.com/p/933193.html

回到顶部