Element plus ui 表单校验避坑

最新推荐文章于 2024-01-14 23:10:32 发布

屿东

最新推荐文章于 2024-01-14 23:10:32 发布

阅读量154

点赞数

文章标签： vue.js elementui 笔记

本文链接：https://blog.csdn.net/L2395183536/article/details/131770790

版权

Element plus ui 表单校验避坑

表单el-form要想实现校验功能三要素

 	ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"

切记要写成ref=" “，不能 :ref=” "
rules是规则集，model是数据绑定的表单，这两个字段得一样最好
el-form-item的prop=“name” ，prop为rules和model的字段
对于v-for遍历的复杂表单，prop可以用模板字符串解决

<div v-for="(item,index) in dataFields.list :key="index">
    <el-form-item label="name" :prop="`list[${index}].name`" :rules="{ required: true, message: 'Required', trigger: 'blur' }">
       <el-input placeholder="name" v-model="item.name"></el-input>
   </el-form-item>
</div>