elementui多层循环动态表单校验,vue中使用element-ui
主要介绍了如何在vue3.0中使用elementUI解决窗体的遍历和检查问题，通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
问题
用vue3.0写项目时，遇到需要遍历的表单。您可以添加和删除表单对象。
不考虑验证问题，是一个简单的数组封装形式的对象。说到验证，按照之前的写法，就是绑定ref值，然后调用组件的validate方法【以form形式配置规则Rules】。
解决方法是将数组嵌入到一个对象中，对象的结构与我们定义的form对象的结构一致。
//我们需要遍历的表单对象的数组
const arr=[
{
名称：，
性别：，
年龄：，
},{
名称：，
性别：，
年龄：，
}
]
//已处理的对象
const afterForm={
名称：，
性别：，
年龄：，
Child:arr，//这里的arr是我们需要遍历的数组[这个键值可以随意取，不一定要 Child ，尽量不要模棱两可就行]
}
然后是html中的dom结构。
El-dialog v-model= addpage available width= 1000 px title=新页面参数配置 @closed=closeDialog
El-form:model= form label-width= 120 px :inline= true ref= ruleFormRef :rules= rules
el-card v-for=(item，index)in form . child :key= index shadow= hover class= mb20
El-form-item label= Page name::prop= ` child[$ { index }]。pagename ` `: rules= rules . pagename
El-input v-model . trim= item . page name class= length-limit /El-input
/El-表单-项目
El-form-item label= page routing::prop= child[$ { index }]。routername“”:rules= rules . routername
El-input v-model . trim= item . routername class= length-limit /El-input
/El-表单-项目
El-form-item label= Page type::prop= ` child[$ { index }]。business type ` `: rules= rules . business type
El-select v-model . trim= item . business type class= length-limit
el选项
v-for=业务选项中的项目
:value=item.value
:label=item.label
:key=item.value
/el选项
/el-select
/El-表单-项目
div class= page manage _ _ dialog-foot
El-button type= primary round @ click= add new form v-if= index===all form . length-1
添加布局表单/el按钮
El-button round:disabled= all form . length===1 index===0 @ click= delete form(index)
删除表单/el按钮
/div
/电子名片
/el格式
模板#页脚
span class=对话框页脚
El-button round @ click= add page impossible=false 取消/el-button
El-button round type= primary @ click=提交新页面提交/el-button
/span
/模板
/el-dialog
//这是我实际项目的页面，所以定义的参数名可能不一样。
写作类似于一般的形式表达式，除了我们的el-form绑定的模型值应该是我们已经处理过的对象。有两个要点需要注意。
el-form-item上绑定的属性值应写成：prop=child[${index}]。pageName ，并且规则也应该绑定到相应的值。
常量规则=反应({
Pagename: [{required: true，message:请输入页面名称，trigger: blur }]，
Routername: [{required: true，message:请输入路由名，trigger: blur }]，
业务类型：[{必填：true，消息：请选择页面类型，触发器：更改 }]，
})
考虑到我们需要的数组数量会发生变化，我们可以直接使用computed来计算属性，得到处理后的数组。
const form=computed(()={
return { pageName: string ，routerName: string ，businessType: string ，child: allForm.value }
})
那就行了！
总结
我自己的理解是在一个假的表单对象中处理我们需要检查的值，然后内层遍历的真实表单对象通过指定值就可以绑定检查规则。
关于解决vue3.0中元素UI表单遍历和检查问题的这篇文章到此为止，更多相关元素请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。