element ui表单处理的简洁方法

一，element的表单可以先绑定到一个空对象上（无初始值时）

到时输入内容后，双向数据绑定，如若对象中不存在这个属性，就会新建这个属性，并不需要初始人为地写一个一个属性。

二，示例

 <el-form ref="dialogVisiForm" label-width="80px" :rules="rules" :model="Form"><el-form-item label="标题 :" prop="title"><el-input v-model="Form.title"></el-input></el-form-item><el-form-item label="排序 :" prop="idx"><el-input v-model.number="Form.idx" ></el-input></el-form-item><el-form-item label="备注 :" prop="remarks"><el-input v-model="Form.remarks"></el-input></el-form-item><el-form-item label="打包费 :" prop="packingFee"><el-input v-model.number="Form.packingFee"></el-input></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-time-select  placeholder="显示开始时间" v-model="Form.showTimeStart" style="width: 100%;"></el-time-select></el-col><el-col class="line" :span="2"><div class="spanLine" >——</div></el-col><el-col :span="11"><el-time-select placeholder="显示结束时间" v-model="Form.showTimeEnd" style="width: 100%;"></el-time-select></el-col></el-form-item></el-form>

这样写完之后，在data中，只需要写Form：{}来初始化就可以。

三，提交表单时地处理

element地表单提交方法，有个默认参数，

getConfirm(val) {}

这个val就直接是整个表单地对象内容了。

element ui表单处理的简洁方法相关推荐

element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单使用记录 element ui 表单 input 文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式 ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
vue开源Element UI表单设计及代码生成器
1 可视化设计器设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...
Element UI——表单验证输入的数字检测出来是string解决方案
问题描述打印判断类型问题分析解决方案数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后 ...
如何解决element ui 表单resetFields 的indexOf报错
如图每个div包裹一个表单每个表单都有清空表单的resetFields方法第一个表单清空不报错第二个及其他都报错了. 我们可以点击去看看由此可以知道这个方法的原理. 我们再去打印一下this ...

element ui表单处理的简洁方法

一，element的表单可以先绑定到一个空对象上（无初始值时）

二，示例

三，提交表单时地处理

element ui表单处理的简洁方法相关推荐

最新文章

热门文章