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)
  }
},

}
#

目录
相关文章
|
JavaScript 数据格式
VUE element-ui下拉菜单el-select获取label值或value的值
VUE element-ui下拉菜单el-select获取label值或value的值
1976 0
VUE element-ui下拉菜单el-select获取label值或value的值
|
3月前
|
JavaScript
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
这篇文章讨论了在Vue 3中使用Element UI的`el-input`组件时,`@keyup.enter="search()"`事件绑定不生效的问题,并提供了通过使用`.native`修饰符来解决这个问题的方法。
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
|
4月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
247 1
|
6月前
el-tree在el-form中通过rules进行校验
el-tree在el-form中通过rules进行校验
206 1
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
390 0
|
JavaScript API
Vue + ElementUI el-input无法输入、修改、删除的问题
# 1、业务背景 查询资料此问题出现的原因是:vue页面进行数据渲染时,层次嵌套或者多重数据绑定导致该组件信息框数据不能被Vue实时监听到,以此出现了数据发生改变但页面上更新或删除对应信息框的数据毫无反应的现象,此时需要强制更新,重新渲染。 # 2、代码示例 ## 1)核心代码 ```html <el-input type="textarea" clearable placeholder="请输入测试文本:" v-model="form.Message" @input="changeMessage($event)"> </el-input> ``` 方法: ```j
246 0
不使用el-form仅仅单独给el-input设置表单校验
不使用el-form仅仅单独给el-input设置表单校验
432 0