欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 产业 > el-form动态标题和输入值,并且最后一个输入框不校验

el-form动态标题和输入值,并且最后一个输入框不校验

2025/5/11 17:11:25 来源:https://blog.csdn.net/qq_44278289/article/details/142331962  浏览:    关键词:el-form动态标题和输入值,并且最后一个输入框不校验

需求:给了固定的label,叫xx单位,要输入单位的信息,但是属性名称都一样的,UI画图也是表单的形式,所以改为动态添加的形式,实现方式也很简单,循环就完事了,连着表单校验也动态

1.效果如下 

2.代码实现+讲解

因为需求是最后一个单位没有必要必填,所以在rules这里判断了一下,主要就是循环遍历了el-form-item,之后prop为了区分也是用index来区分了

 <el-dialog title="新建单位" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="unitDialog" width="30%"><el-form:model="formInline"ref="unitRuleForm"label-width="130px"class="demo-form-inline"label-position="left"><el-form-itemv-for="(item, index) in formInline.formData":key="index":label="item.organizations_type":prop="'formData[' + index + '].organizations_name'":rules="index < formInline.formData.length - 1? {required: true,message: `${item.organizations_type}不能为空`,trigger: 'blur'}: null"><el-input v-model="item.organizations_name"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="unitDialog = false">取 消</el-button><el-button type="primary" @click="saveUnitData()">确 定</el-button></span></el-dialog>
formInline: {formData: [{project_id: 0,organizations_type: 'xx单位1',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位2',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位3',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位4',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位5',organizations_name: ''},{project_id: 0,organizations_type: 'xx单位6',organizations_name: ''}] //参建单位列表},

 文章到此结束,希望对你有所帮助~

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词