vue element-ui input每次输入后自动失去焦点text改变的时候由于 key 值绑定的text的问题造成的重绘错误示例 <div v-for="link in content" :key="link.text"> <el-input v-model="link.text" /> </div>正确示例 <div v-for="(link,index) in value.label" :key="index">
今天工作的时候，遇到了一个问题，使用
element
-
ui
中的el-
input
作为页面的
输入
框，当
输入
框
失去
焦点
的时候和用户按回车的时候都触发同一个更新数据的事件。（页面的列表中存在有多个el-
input
，对其中某一个进行操作）
<template>
<el-form>
<el-form-item>
<el-...
如何阻止点击其他区域，
input
输入
框会
失去
焦点
位置阻止
失去
焦点
通过a标签设置user-select为none：通过js阻止默认事件通过内联js实现
在开发过程中，总会碰到以下两个情况：
要求点击某个区域，阻止
input
框 (或者设置了 contenteditable=“true” 的编辑区)
失去
焦点
。
要求像微信
输入
框那种点击选择表情、图片等要求保留原来
焦点
的位置的情况。因为一
失去
焦点
位置，除非是往最前面或最后面插入，否则要想在原来的地方插入内容是很难的。
接下来就分享一下个人的一些方法总结。
在开发中发现
输入
框
输入
数据直接隐藏，在同位置显示别的
输入
框的时候，会
自动
聚焦。解决这种情况可以让
输入
框主动失焦。
complete(e) {
if(this.verification.length>=6) {
e.src
Element
.blur(); // 让
输入
框主动失焦
该问题场景是，在el-dialog框中，嵌套了表单，在表单中使用el-
input
输入
框时，发现
输入
一个字符后
失去
焦点
不能在继续
输入
，需要重新点击
输入
框才能
输入
内容。部分代码如下：
<el-form-item
v-for="(item,index) in data"
:key="item.label"
:label="'名称'+index"
:value="item.label"
<el-
input
v-model="item.labe
表格中直接插槽法：
<el-table-column :show-overflow-tooltip="true" prop="number" label="发货数量">
<template slot-scope="scope">
<el-
input
v-model.number="scope.row.number" @focus="onfoucs(scope)" @blur="blurUsern
解决方案：
提示：这里填写该问题的具体解决方案：
例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。
<!-- 用户列表表格 -->
<div class="user-list-table">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="userId" label...
input
输入
框
每次
输入
一次就
失去
焦点
，由于第一次开发后台管理系统
最开始以为是autocomplete的原因，很快发现不是，后来发现是因为v-for绑定的key值原因
v-for="(item,index) in signUpFormProps" :key="item.value+index"
显然
每次
输入
改变了item.value的值导致其进行了渲染，将item.value值去掉后问题就解决了
