前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >elementUi中input输入字符光标在输入一个字符后,光标失去焦点

elementUi中input输入字符光标在输入一个字符后,光标失去焦点

作者头像
TimothyJia
发布于 2022-05-05 08:21:34
发布于 2022-05-05 08:21:34
4.4K0
举报

        bug描述:elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出。

       首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的,原因是用了局部作用域插槽并且table的外层包了一层表单,导致光标输入,table下的数据刷新,导致table重绘,光标失去焦点,首先声明不建议大家这样写代码,如果要要增加一个table中的表单校验功能,建议大家把el-form表单放入table内的作用域插槽中,这样更加容易理解,好了,先说下如图这种代码的解决方案,我最后也是用这种方案解决的。

解决办法是table绑定一个初始化的模拟数据,,插槽内绑定页面渲染的数据,当输入框数据变化时,table绑定的数据并没有发生变化,不会导致table重绘,页面也可正常校验

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue实战电商管理后台
这里我们使用了 ElementUI 组件 el-container、el-menu
Remember_Ray
2020/10/09
4.6K3
vue实战电商管理后台
基于 el-form 封装一个依赖 json 动态渲染的表单控件 定义接口,统一规范封装各种表单子控件定义属性定义内部model实现多行多列和布局调整实现扩展实现数据联动实现组件联动
基于 el-form 封装了一个表单控件,包括表单的子控件。 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾。 毕竟UI库提供的功能都很强大了,不能浪费了对吧。
用户1174620
2021/05/20
1.8K0
Go程序提速42%,只需改变一个字符
不过顺着这个思路发现有人发现,就连Go开发团队的核心人物Russ Cox都在标准库中犯过同样的错误。
量子位
2022/12/09
4380
Go程序提速42%,只需改变一个字符
Java中如何输入一个字符
在一次编写代码时需要让程序接收一个字符,当我写出scanner.next时,我惊奇的发现,Scanner类中没有定义读取char的方法!!!
全栈程序员站长
2022/09/08
5420
OJ刷题记录:判断一个字符串中括号是否匹配 题目编号:616
从键盘读入一个字符串,其中只含有() {} [ ] ,判断该字符串中的每种括号是否成对出现。
英雄爱吃土豆片
2020/10/29
6300
学会使用Vue JSX,一车老干妈都是你的
连续几篇文章,每篇都有女神,被掘友给吐槽了,今天不提了女神了,反正女神都是别人的(扎心了)。这两天小编看了腾讯与老干妈的事情,晚上馒头夹老干妈吃起来都感觉很带劲。今天这篇文章将给大家小编在项目中使用JSX的一些实战经验。其实一般情况下写Vue还是比较推荐template的写法的,但是有时候我们真的需要更灵活的去做一些功能,这时候就需要用到JSX了。
前端进击者
2021/07/27
3K0
来给defineComponent附魔
比如现在要开发一个步进器组件,双向绑定一个数字变量。点击加号的时候绑定值加一,点击减号的时候绑定值减一;大概是长这个样子的:
玖柒的小窝
2021/11/07
3.5K0
来给defineComponent附魔
vue之vue组件component整理
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
山行AI
2019/07/30
6.9K0
vue之vue组件component整理
详解vue组件三大核心概念
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。
Nealyang
2019/09/29
1.4K0
详解vue组件三大核心概念
一个后端狗的 Vue 笔记【入门级】
最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的,以前也有一定做小程序的基础,感觉还是很相似的,不过对于一些稍复杂的点,感觉还是总结的不够细致,例如插槽,和计算属性等,平时前端的东西看的也不是很多,学习过程中整理的笔记,和大家一起分享交流!欢迎各位大大交流意见~
BWH_Steven
2020/09/10
1.4K0
一个后端狗的 Vue 笔记【入门级】
一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧
之前写过一篇文章,关于 Vue 属性透传的,文章中我列举了很多种方法去实现属性透传。其中包括直接设置 props,v-bind="$attrs",render function 等方式。感兴趣,详情看 【Vue 进阶】——如何实现组件属性透传?
GopalFeng
2020/09/24
6.2K0
一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧
gis中char是什么字段_输入一个字符串统计字母个数
I x 向集合中插入一个字符串 x; Q x 询问一个字符串在集合中出现了多少次。 共有 N 个操作,输入的字符串总长度不超过 105,字符串仅包含小写英文字母。
全栈程序员站长
2022/09/22
4310
vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」
该事件与v-on:input事件的区别在于:input事件是实时监控的,每次输入都会调用,而@keyup.enter事件则是在pc上需要点击回车键触发,而在手机上则是需要点击输入键盘上的确定键才可触发。
全栈程序员站长
2022/08/12
15.8K0
vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」
前端开发技巧:Vue 项目中如何实现全局和局部禁止input输入框输入 Emoji 的最佳实践
在现代前端开发中,限制输入框禁止输入 Emoji 表情符号 是一项常见而重要的需求,尤其在需要高数据质量的场景中(如用户注册、表单提交、内容发布、后台管理等)。Emoji 的存在可能会导致数据库存储问题、前后端解析错误,甚至影响用户体验。因此,确保输入框的内容符合预期显得尤为关键。
猫头虎
2024/11/28
4870
前端开发技巧:Vue 项目中如何实现全局和局部禁止input输入框输入 Emoji 的最佳实践
Vue使用Element实现增删改查+打包
在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。
憧憬博客
2020/07/20
2.2K0
搜索一个字符数组中是否存在某个字符
请在一个类中编写一个方法,这个方法搜索一个字符数组中是否存在某个字符,如果存在,则返回这个字符在字符数组中第一次出现的位置(序号从0开始计算),否则,返回-1。要搜索的字符数组和字符都以参数形式传递传递给该方法,如果传入的数组为null,应抛出IllegalArgumentException异常。在类的main方法中以各种可能出现的情况测试验证该方法编写得是否正确,例如,字符不存在,字符存在,传入的数组为null等。
崔笑颜
2020/06/08
1.6K0
【摸鱼神器】UI库秒变低代码工具——表单篇(一)设计
表单是很常见的需求,各种网页、平台、后台管理等,都需要表单,有简单的、也有复杂的,但是目的一致:收集用户的数据,然后提交给后端。
用户1174620
2022/06/30
2.5K0
【摸鱼神器】UI库秒变低代码工具——表单篇(一)设计
组件化详细
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
用户11097514
2024/05/31
3010
组件化详细
登录注册小案例实现(使用Django中的form表单来进行用户输入数据的校验)
注:虽然form可以生成前端页面,但这个功能实际用的少,主要是是用form表单的验证功能!
玖柒的小窝
2021/09/29
5.1K0
登录注册小案例实现(使用Django中的form表单来进行用户输入数据的校验)
前端成神之路-vue前端项目02
1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户
海仔
2021/03/20
4.1K0
推荐阅读
相关推荐
vue实战电商管理后台
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档