今天工作的时候，遇到了一个问题，使用element-ui中的el-input作为页面的输入框，当
输入框失去焦点
的时候和
用户按回车
的时候都
触发同一个更新数据的事件。（页面的列表中存在有多个el-input，对其中某一个进行操作）
<template>
<el-form>
<el-form-item>
<el-input v-model="msg" @blur="updateData" @keyup.enter.native="updateData"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
msg: ''
methods: {
updateData() {... //更新操作}
</script>
这样子写确实能够实现 “当el-input失去焦点和按enter回车时都能触发更新事件” 的需求，但是会出现一个问题：
按enter回车触发更新事件后，el-input还处于聚焦状态，当el-input失去焦点后，就算数据相同，还是会再触发一次更新事件
这个时候需要在按enter回车之后使el-input失去焦点，这个时候就要用到$event,但是直接在updateData函数中使用,在enter回车后还是会触发两次更新数据事件，因为先触发了失去焦点事件--》失去焦点事件触发了更新事件--》更新事件
<template>
<el-form>
<el-form-item>
<el-input v-model="msg" @blur="updateData" @keyup.enter.native="updateData($event)"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
msg: ''
methods: {
updateData(event) {
if(event) {
event.target.blur()
... //更新操作}
</script>
二、解决办法
解决上面提到的问题后，最终的代码如下：
<template>
<el-form>
<el-form-item>
<el-input v-model="msg" @blur="updateData" @keyup.enter.native="enterBlur($event)"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
msg: ''
methods: {
updateData(event) { ... //更新操作},
//回车失去焦点
enterBlur(event) { event.target.blur() }
</script>
一、问题今天工作的时候，遇到了一个问题，使用element-ui中的el-input作为页面的输入框，当输入框失去焦点的时候和用户按回车的时候都触发同一个更新数据的事件。（页面的列表中存在有多个el-input，对其中某一个进行操作）<template> <el-form> <el-form-item> <el-...
分组预设，预设控制组件
limit-
input
-number基于
el
ement-ui的
el
-
input
-number控件基础改造，所以本组件依赖
el
ement-ui limit-
input
-number可直接替换
el
-
input
-number
yarn add
vue
-limit-
input
-group
npm i
vue
-limit-
input
-group -S
el
ement-ui/
el
-
input
-number
max：所有输入总和最低值min：所有输入总和最低值
大于（newVal，overVal，maxVal）：当控件总和超过最小值
newVal：当前输入的值overVal：剩余能量输入的数值maxVal：最大数值minVal：最小数值
< limit-
input
-group max =" 12 " min =" 5
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--
input
获得
焦点
后按
回车
form自动提交-->
<
input
type="text">
</form>
</body>
</html>
有多个
input
时(不管是否是隐藏的)，任意一个
input
获得
焦点
都不会提
该问题场景是，在
el
-dialog框中，嵌套了表单，在表单中使用
el
-
input
输入框时，发现输入一个字符后
失去
焦点
不能在继续输入，需要重新点击输入框才能输入内容。部分代码如下：
<
el
-form-item
v-for="(item,index) in data"
:key="item.lab
el
"
:lab
el
="'名称'+index"
:value="item.lab
el
"
<
el
-
input
v-mod
el
="item.labe
要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了
vue
中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了
vue
中的v-bind,使其与class或者style绑定,但是也没有作用
<
el
xss=removed v-mod
el
=form.username xss=removed></
el
>
data(){
return{
isDisabled:true
后来又想到使用jquery来改变属性,
处理
Vue
3的
el
-
input
回车
事件时，需要使用
Vue
3提供的新语法。首先，需要使用 ref 参考输入元素，然后在输入元素上使用 @keydown.
enter
属性来监听
回车
事件并调用相应的方法。具体地，可以按照以下步骤实现：
1. 在模板中，将
el
-
input
的ref绑定到
Vue
实例上，例如：
<
el
-
input
ref="
input
" placeholder="请输入内容" v-mod
el
="content" @keydown.
enter
="on
Enter
"></
el
-
input
>
2. 在
Vue
实例中使用 ref 获取
el
-
input
元素的引用，例如：
setup() {
const
input
Ref = ref(null);
const content = ref("");
const on
Enter
= () => {
console.log("
Enter
key pressed!");
onMounted(() => {
input
Ref.value.focus();
return {
input
Ref, content, on
Enter
};
3. 在
回车
事件中使用 console.log() 等方法做出相应的处理， 例如：
const on
Enter
= () => {
console.log("
Enter
key pressed!");
// 处理
回车
事件
4. 最后，在
el
-
input
元素中绑定ref属性，并在onMounted()生命周期中调用
input
Ref.focus() 来聚焦输入框， 例如：
<
el
-
input
ref="
input
" placeholder="请输入内容" v-mod
el
="content" @keydown.
enter
="on
Enter
"></
el
-
input
>
export default {
setup() {
const
input
Ref = ref(null);
const content = ref("");
const on
Enter
= () => {
console.log("
Enter
key pressed!");
// 处理
回车
事件
onMounted(() => {
input
Ref.value.focus();
return {
input
Ref, content, on
Enter
};
通过以上方法，即可成功处理
Vue
3
el
-
input
回车
事件。
CSDN-Ada助手:
el-tree子节点取消选中，父节点选中效果不变
kide1:
按enter回车使el-input失去焦点
devServer:
解决npm ERR! code ELIFECYCLE npm ERR! errno 1问题
眼睛里有星星√:
