element 表单校验失败自动聚焦到失败的input框
自动 失败 表单 input Element 校验 聚焦
2023-09-11 14:22:18 时间
1.在对应的input框上添加ref属性,直接根据ref就可精确地获取到元素
<el-form-item label="课程名称" :label-width="formLabelWidth+'px'" prop="title"> <el-input ref="title" v-model="form.title" placeholder="请输入课程名称" autocomplete="off"></el-input> </el-form-item> <el-form-item label="课程难易程度" :label-width="formLabelWidth+'px'" prop="level"> <el-select ref="level" v-model="form.level" placeholder="请选择课程难易程度"> <el-option label="初级" value="初级"></el-option> <el-option label="中级" value="中级"></el-option> <el-option label="高级" value="高级"></el-option> </el-select> </el-form-item>
2. element-ui自带的表单验证返回中包含一个invalidFields对象,此对象包含了验证失败的所有属性名
3.遍历invalidFields对象 的属性,拿到它的属性值 与我们上面定义的 ref 一样,我们就可以拿到失败的控件,利用focus 自动聚焦就ok 了
for(var obj in invalidatedata) { // console.log(obj) // console.log(obj) // console.log((this as any).$refs[obj].focus()) // console.log(this.$refs[obj]); (this as any).$refs[obj].focus(); break; // console.log(this.$refs.title) // (this as any).$refs[obj].focus() }
相关文章
- Qt通过SVN自动给EXE版本信息QtVersionInfo
- Zsh(oh-my-zsh)的Maven自动提示插件(zsh-maven-complection)
- 织梦网站数据入库接口(实现图片本地化,自动图片打水印)【原创】
- Mybatis上路_06-使用Java自动生成
- loadrunner12.55:关联回放失败Action.c(16): Error: C interpreter run time error: Action.c (16): Error -- memory violation : Exception ACCESS_VIOLATION received.,自动关联生成函数web_reg_save_param_attrib()
- 机器学习笔记 - 自动编码器autoencoder
- HBuilder设置代码自动换行的方法
- Cloud for Customer UI designer自动生成的一些模型
- SAP Spartacus b2b home页面的自动换行是怎么做到的
- objection自动生成hook代码
- Linux 下Mysql自动备份脚本
- ROG幻15电脑开机自动安装软件怎么U盘重装系统
- [SSD固态硬盘协议 7] NVME 2.0 新技术 ZNS 自动分区:减少延迟,提高寿命
- Android Studio自动生成UML关系类图
- kafka自动提交offset失败:Auto offset commit failed
- 【java基础】包装类,自动装箱和自动拆箱