elementUI之el-form-item的嵌套的场景

首先我把绿色部分看作一个表单，第一层循环放在表单外，在红色部分外包一个div进行二次循环。至此成功，el-from的循环嵌套prop需要根据数据结构进行修改，此处仅供参考，多试试就行了。此外我们还需要修改二层循环prop的值，并在el-form-item行内写上校验规则。使用的是vue3+el-form。

页面中显示的东西，完全是自定义组合的而不是固定的，所以此时的elform的普通prop验证已经不能满足于我们的开发要求，那如何处理呢？而针对el-from-item的prop指定就显示的尤其特别，prop为空，则意味着不需要验证，不为空则意味着需要验证！最后一步则简单多了，实现rules方法进行验证即可，我们是行间实现验证规则，你也可以参考下面的函数中验证规则，均可。可以看到，对于el-from的使用仍然是能用的规则，给他定义ref，给他定义动态的model!('请选择CRF模板'));

☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~

el-form/el-form-item 表单验证

使用el-form 自带的 rules 进行规则设置。

使用 elementUI的表单，在数据为对象嵌套数组对象时检验内部对象为必填项时应该这样写。prop前加冒号(:) 等号后面，引号内使用 ` ` 拼接 加上[${index}]

本文针对ElementUI表单校验中必填项红色星号不显示的问题，提供了一份3分钟快速排查指南。文章深入剖析了星号显示的底层逻辑，指出关键在于`prop`属性与`rules`规则中`required: true`的正确关联，并详细列出了从检查`prop`拼写、`rules`数组结构到排查CSS样式覆盖的完整步骤。同时，文中还提供了动态表单、嵌套字段等复杂场景下的正确写法与最佳实践代码片段，帮助开发者高效解决这一常见问题。

对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题

今天我们来聊一聊form表单组件。市面上开源的form表单组件，写法基本上千篇一律，一个form组件内部跟上一大堆的form-item组件，内嵌了select、radio、checkbox之类的这些就不停的需要去写遍历，需要布局的时候写上一堆的class.一个form组件稍微大一点的就朝100-200行甚至更多去了。不方便维护而且看起来头晕，不符合vue的数据驱动视图的概念。基于以上问题遂对form-item组件进行了二次封装，至于为什么不是对form表单进行二次封装，请往下看。

elementui el-form中el-form-item自定义label；在vue开发中有时候对element-ui表单的label需要加入图标.

每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据，组件升级采用了 flex 布局，以替代旧版本的 float 布局。包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。属性传入约定的验证规则，并将 Form-Item 的。Form 组件提供了表单验证的功能，只需要通过。

【代码】el-form组件实现一个el-form-item中包含多个输入框的表单校验。

2.表格中的输入框校验写在cusBaseRule中，其中它的prop看代码，直接用他绑定字段里的v-model的字段。1.首先，最外层的客户基地校验绑的是下面的表格，直接写rules里。

需求如下：el-form-item下嵌套多个el-form-item，并且能进行表单验证 表单内部项绑定校验主要靠prop和rules，porp指明地址，rules声明规则 起先的思路是el-form-item =》el-form =》el-form-item循环，但是这样提交前要做两次校验。但是实际上只要按照一层一层往下写就行了，即直接el-form-item =》el-form-item循环 // 这边抽成了子组件 <template> <el-form-item .

在element-ui的el-form中，如果要重置一个表单的话，可以用resetFields方法，先看下面的例子： <template> <div> <el-form :inline="true" :model="formInline" class="demo-form-inline " ref="form"> <el-form-item label="输入姓名" prop='name'> <

但如果只是这样做的话，label前面没有红色的星号，我看到很多人都是直接这样用的，但我比较执拗，查了一下elementUI文档，发现el-form-item标签有一个required属性，试了一下果然可以显示一个红色的星号，至此问题完美解决。严格来讲，使用el-form-item时，是无法使用prop绑定多个字段，但业务中的需求是各式各样的，总会遇到这种情况，那就要想办法去实现它，毕竟东西是死人，我们人，是活的，要活学活用。上图中省市区联动，还有经纬度，都是需要在同一行内，显示多个控件，并绑定多个字段的。

1. 基本三大组件 <el-form> <el-form-item> <el-input/> </el-form-item> </el-form> 2. 数据收集 在el-form上面指定 model，在el-input组件加 v-model 进行双向数据绑定 3. 数据校验 在el-form上面指定 rules 校验规则，在el-form-item组件加 prop，指定要校验的字段 &...

【代码】element ui form循环嵌套表单 及嵌套表单的验证方法（校验）

目录前言modelproprules验证总结 前言 最近写vue项目需要用element ui中的表单组件显示一些信息呈现在页面上，但在使用提供的一些属性时有些困惑——这三者之间有什么关系，必须要同时存在吗？于是在这里做一些记录。 model 官方说是表单中的数据对象，于是有 <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="用户名" prop="name"