第一个表单的输入框都触发blur提示语后,切换至第二个表单 第二个表单的输入框触发blur后,第一个输入框的校验失效了。 返回后,第一个输入框触发blur,校验又失效了,如下: 解决方法: 在切换表单之后触发blur,有时并未调用表单的validator。这时,需要给待校验的表单元素的外层el-form-item标签上添加一个唯一的key值...
validator: validateNumber, trigger: 'blur', }, ], }, }; }, ... 原因:clearable和trigger: blur不能同时使用 解决方法: 方法1. 去掉clearable 方法2. trigger改为change
最近在项目中遇到一个场景,就是在校验输入框失焦(blur)事件后,第一次点击时按钮的点击事件失效,后来排查,发现原因,是因为第一次点击时先走了blur事件,然后再走点击事件,所以导致第一次点击按钮失效。 出现bug的原因 由于浏览器的默认事件,当你点击按钮时,页面中有文本框失焦时,会先触发文本框的blur事件,然后再...
el-form提供了多种校验触发时机,可以通过设置触发时机来控制表单校验的时机。常见的触发时机有: 1. blur:在表单项失去焦点时触发校验。 2. change:在表单项值发生改变时触发校验。 3. submit:在表单提交时触发校验。 可以通过设置el-form的validate-trigger属性来指定校验触发时机,默认为blur。 四、校验结果处理 el...
</el-form-item> </el-form> </template> <script> export default { data() { return { ruleForm: { pass: '', checkPass: '', age: '', }, rules: { pass: [{ required: true, message: '请输入名字', trigger: 'blur' }],
问题描述:在form表单中,正常回显表单值,点击文字,显示下拉框,选中下拉框的值,又恢复成默认状态(有一个问题就是点击文字,显示el-select选择框,不激活下拉框,再点击...
el-form表头数据举例 子组件表单数据根据根据父组件传递过来的formHeader动态渲染。即v-for中搭配v-if去呈现,先简单看一下formHeader数据结构,具体在后边代码中都有的 // 表头数组数据 formHeader: [ { itemType: "text", // 输入框类型 labelName: "姓名", // 输入框名字 propName: "name", // 输入框...
'blur'}],age: [{ required:true, message:'请输入年龄',trigger:'blur'}],},}},methods: {submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {alert('submit!')}else{console.log('error submit!!')returnfalse}})},resetForm(formName) {this.$refs[formName]....
封装el-form 目前在编写项目中,每个页面都有el-from,所以对el-form做了二次封装, 组件在个人开发使用不错,但不确定能满足各种业务需求,所以这里主要和大家分享一下设计思路。用一次爽一次,越用越爽。 分析问题: el-form是element-ui库的表单组件,如果我们要将其进行二次封装,那么需要考虑几个问题: ...
@blur="inputBlur(row,$index,'RuleName')" /> </el-form-item> <span v-if="!showEdit[$index]['RuleName']">{{ row.RuleName }}</span> </template> </el-table-column> <el-table-column label="协议" prop="Prot" width="100"> ...