El-input组件的一些问题

简介: EL-input聚焦问题

问题:页面刷新后第一个input可以聚焦,第二个以后不能聚焦

解决方案:


<span v-if="visible" @dblclick="editContent" class="machine-info">{{variableInfo}}</span>
<el-input v-else size="mini" ref="textInput" v-model="variableInfo" @keyup.enter.native="confirmEdit"
          @blur="confirmEdit"></el-input>



name: 'EditCell',
props: {
  value: {}
},
watch: {
  value () {
    this.copyValue()
  }
},
data () {
  return {
    item:{
      textInput:''
    },
    visible: true,
    variableInfo: '',
  }
},
mounted () {
  this.copyValue()
},
methods: {
  copyValue () {
    this.variableInfo = this.value
  },
  editContent () {
    this.visible = false
    this.$nextTick(()=>{
      if(this.$refs.textInput){
        this.$refs.textInput.focus()
      }
    })

  },
  confirmEdit () {
    this.visible = true
    this.$emit('input', this.variableInfo)
  }
},

}
#

目录
相关文章
Element el-button 按钮组件详解
本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按钮分组 6. 按钮尺寸 7. 小结
2959 0
Element el-button 按钮组件详解
|
4月前
|
JavaScript
v-model指令获取常见表单项的内容 input,textarea,radio,checkbox,select
本文介绍了Vue.js中v-model指令的作用和语法,并通过示例代码展示了如何使用v-model来获取不同类型的表单元素(如文本输入框、文本域、复选框、单选框和下拉菜单)的内容。
|
5月前
|
JavaScript
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
这篇文章讨论了在Vue 3中使用Element UI的`el-input`组件时,`@keyup.enter="search()"`事件绑定不生效的问题,并提供了通过使用`.native`修饰符来解决这个问题的方法。
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
|
8月前
el-tree在el-form中通过rules进行校验
el-tree在el-form中通过rules进行校验
225 1
|
8月前
input type="button"和button的区别
input type="button"和button的区别
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
464 0
|
JavaScript
Element el-check 多选框详解
本文目录 1. 用途 2. 普通多选框 3. 带边框的多选框 4. 多选框组 5. 按钮样式的多选框组 6. 多选框组选中数量限制 7. 选项通过变量自动生成 8. 小结
982 0
Element el-check 多选框详解