分类：el-form

2020
11-25

vue + el-form 实现的多层循环表单验证

html<el-form:model="formObj":rules="rules"ref="ruleForm"><el-form-item:label="'护理记录项目配置：'"label-width="180px"><templatev-for="(formItem,index)informObj.formDictExtendDoList"><divclass="hljl-container":key="formItem.id"><el-row><el-col:span="8"><el-form-item:label="'字段名称：'"label-width="90px":rules="rules.fieldName":prop="'fo... 继续阅读 >

2020
10-10

el-form 多层级表单的实现示例

前言本篇文章基于vue、element-ui需求前端开发过程中，经常遇到表单开发的需求，element-ui为我们带来了极大的便利，前端只需要更专注于前端逻辑。我们往往会遇到相对复杂的表单，比如下面的表单:我们设计的时候可以把它设计成3级表单，即划分表单到每一个校验项(输入框，下拉框的等)最终实现效果如下图所示:实现el-form使用，详情可参见：Form表单有几个比较重要的属性：ref相当于标签的idmodel表单数据对象rule... 继续阅读 >

2020
10-08

vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作

在项目中做联系人的添加和编辑功能，点击父级页面的添加和编辑按钮，用的是同一个表单弹窗，数据添加和编辑用同一个弹窗，没有在弹窗使用v-if，性能不是很好，弹窗中有表单，在编辑弹窗表单数据之后关闭弹窗，然后点击添加的时候，弹窗里的表单数据还是之前编辑的数据，无法做到清空表单数据，接下来是解决方法了，嘿嘿首先是不管是添加还是编辑，都需要将子组件需要的对象属性一一写出来，传给子组件，然后是主要用到了el-form表... 继续阅读 >