element ui table 中双击修改资料时显示input自动获取焦点

最新推荐文章于 2024-04-18 11:48:47 发布

张二狗a

最新推荐文章于 2024-04-18 11:48:47 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_41306166/article/details/112988391

版权

本文介绍了在Vue项目中，针对el-input组件在表格固定列时聚焦失效的问题，提出了两种解决方案：使用$nextTick和setTimeout。然而这两种方法在特定情况下可能会失效。为了解决这个问题，文章提出了一种自定义指令v-focus的方法，在main.js中定义并应用该指令，确保el-input在动态显示后能够正确聚焦。同时提供了完整的代码示例。

摘要由CSDN通过智能技术生成

<el-input v-model="input" placeholder="请输入内容" v-if="showinput" v-focus id="myText"  ref="mark"></el-input>

方法一

使用this.nextTick()

this.$nextTick(()=>{
        this.$refs['mark'].focus();
      })

方法二

使用getElementById

setTimeout(()=>{
          document.getElementById("myText").focus();
        },100)

以上两种方法在table 列设置为fixed时聚焦效果会失效

解决方法如下

使用自定义指令v-focus

在main.js文件中定义

Vue.directive("focus", {
  bind:function (el) { // 1.每当指令绑定到元素上的时候，会立即执行这个bind函数，【执行一次】
    el.focus()
  },
  inserted:function (el) { // 2.当元素插入到DOM中的时候，会执行 inserted 函数， 【触发一次】
    if(el.tagName.toLocaleLowerCase() == 'input'){
      el.focus()
    }else{
      if(el.getElementsByTagName('input')){
        el.getElementsByTagName('input')[0].focus()
      }
    }
  },
  updated:function ( ) {  // 3.当VNode更新的时候，会执行 updated,【可能触发多次】
    el.focus()
  }
});

el-input中插入 v-focus 指令即可。

ps:移除焦点把focus 改为 blur即可。

全部代码

<template>
  <div>
    <div @click="qaq()">qaq</div>
    <el-input v-model="input" placeholder="请输入内容" v-if="showinput && qwq"  id="myText"  ref="mark"></el-input>
    <el-input v-model="input2"></el-input>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      qwq:true,
      showinput:false,
      input:"aa",
      input2:"bb",
      msg: "Welcome to Your Vue.js App",
    };
  },
  // mounted(){
  //   this.$refs['mark'].focus()
  // },
  methods: {
    qaq() {
      (this.showinput==false) ? (this.showinput=true) : (this.showinput=false);
      console.log("q",this.showinput)
      if(!this.showinput){
        return
      }
      this.$nextTick(()=>{
        this.$refs['mark'].focus();
        setTimeout(()=>{
          document.getElementById("myText").focus();
          // this.$refs.myInput.focus();
        },100)
      })
      setTimeout(()=>{
          document.getElementById("myText").focus();
        },100)
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>