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

}
#

目录
相关文章
Thymeleaf 表达式工具类(#strings #dates #numbers #bools)
Thymeleaf 表达式工具类(#strings #dates #numbers #bools)
|
11月前
|
JavaScript 关系型数据库 MySQL
node连接mysql,并实现增删改查功能
【8月更文挑战第26天】node连接mysql,并实现增删改查功能
329 3
|
SQL 存储 NoSQL
SQL、NoSQL还是NewSQL
【7月更文挑战第5天】SQL、NoSQL还是NewSQL
212 1
|
数据库 Android开发
Android 通过升级SettingsProvider数据强制覆盖用户的设置项
Android 通过升级SettingsProvider数据强制覆盖用户的设置项 【5月更文挑战第7天】
373 5
|
8月前
|
存储 监控 Devops
DevOps实践:持续集成/持续部署(CI/CD)的实战指南
DevOps实践:持续集成/持续部署(CI/CD)的实战指南
|
9月前
|
数据挖掘 API 数据安全/隐私保护
淘宝商品 API 接口怎样去使用?
淘宝商品API接口为开发者和企业提供了一种强大的工具,用于高效获取和利用淘宝平台上的商品数据。本文详细介绍了从注册成为淘宝开发者、申请API权限、获取API密钥,到阅读API文档、搭建开发环境、调用API接口、处理响应结果及数据应用的全过程。通过实际案例展示了如何利用淘宝商品API接口提升电商平台和价格比较网站的竞争力,并强调了使用过程中的注意事项,如遵守API使用规范、数据安全与隐私保护等。
1796 0
|
移动开发 前端开发
基于flowable没有规则的并发网关流程跳转记录分析
基于flowable没有规则的并发网关流程跳转记录分析
224 0
|
10月前
|
存储 传感器 Linux
STM32微控制器为何不适合运行Linux系统的分析
总的来说,虽然技术上可能存在某些特殊情况下将Linux移植到高端STM32微控制器上的可能性,但从资源、性能、成本和应用场景等多个方面考虑,STM32微控制器不适合运行Linux系统。对于需要运行Linux的应用,更适合选择ARM Cortex-A系列处理器的开发平台。
487 0
|
传感器 物联网 Linux
嵌入式云IOT技术圈公众号精选文章专题汇总
嵌入式云IOT技术圈公众号精选文章专题汇总
211 0
|
Linux 异构计算 Docker
QAnything本地知识库问答系统:基于检索增强生成式应用(RAG)两阶段检索、支持海量数据、跨语种问答
QAnything本地知识库问答系统:基于检索增强生成式应用(RAG)两阶段检索、支持海量数据、跨语种问答
QAnything本地知识库问答系统:基于检索增强生成式应用(RAG)两阶段检索、支持海量数据、跨语种问答