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

}
#

目录
相关文章
|
机器学习/深度学习 存储 JSON
chatgpt说它有上千亿的参数,是什么意思?
chatgpt说它有上千亿的参数,是什么意思?
1972 0
Thymeleaf 表达式工具类(#strings #dates #numbers #bools)
Thymeleaf 表达式工具类(#strings #dates #numbers #bools)
|
SQL 存储 NoSQL
SQL、NoSQL还是NewSQL
【7月更文挑战第5天】SQL、NoSQL还是NewSQL
391 1
|
存储 监控 Devops
DevOps实践:持续集成/持续部署(CI/CD)的实战指南
DevOps实践:持续集成/持续部署(CI/CD)的实战指南
|
数据库 Android开发
Android 通过升级SettingsProvider数据强制覆盖用户的设置项
Android 通过升级SettingsProvider数据强制覆盖用户的设置项 【5月更文挑战第7天】
508 5
|
移动开发 前端开发
基于flowable没有规则的并发网关流程跳转记录分析
基于flowable没有规则的并发网关流程跳转记录分析
327 0
|
运维 监控 数据中心
100Base-FX以太网媒体标准详解
【10月更文挑战第16天】
1160 1
|
传感器 物联网 Linux
嵌入式云IOT技术圈公众号精选文章专题汇总
嵌入式云IOT技术圈公众号精选文章专题汇总
273 0
|
数据挖掘 API 数据安全/隐私保护
淘宝商品 API 接口怎样去使用?
淘宝商品API接口为开发者和企业提供了一种强大的工具,用于高效获取和利用淘宝平台上的商品数据。本文详细介绍了从注册成为淘宝开发者、申请API权限、获取API密钥,到阅读API文档、搭建开发环境、调用API接口、处理响应结果及数据应用的全过程。通过实际案例展示了如何利用淘宝商品API接口提升电商平台和价格比较网站的竞争力,并强调了使用过程中的注意事项,如遵守API使用规范、数据安全与隐私保护等。
1927 0
|
Linux 异构计算 Docker
QAnything本地知识库问答系统:基于检索增强生成式应用(RAG)两阶段检索、支持海量数据、跨语种问答
QAnything本地知识库问答系统:基于检索增强生成式应用(RAG)两阶段检索、支持海量数据、跨语种问答
QAnything本地知识库问答系统:基于检索增强生成式应用(RAG)两阶段检索、支持海量数据、跨语种问答