el-table 内嵌 input 调用 focus 方法无效

最新推荐文章于 2024-03-08 16:25:54 发布

前端小云儿

最新推荐文章于 2024-03-08 16:25:54 发布

阅读量288

点赞数

分类专栏：前端静态页面以及逻辑文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/134470080

版权

前端静态页面以及逻辑专栏收录该内容

117 篇文章 17 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文讨论了在Vue项目中使用Element-UI的Table组件时，遇到内嵌input元素调用focus方法无效的常见问题，并提供了详细的解决方案，帮助开发者实现输入框的自动聚焦功能。

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

<template>
  <div>
    <h4>el-table 内嵌 input 调用 focus 方法无效</h4>
    <h4>
      <el-table>
        <el-table-column label="名称">
          <template>
            <el-input ref="inputRef" id="inputRef" />
          </template>
        </el-table-column>
      </el-table>
    </h4>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    getSumreduce() {
      //refs都无效
      // this.$refs["inputRef"].focus();
      // this.$refs["inputRef"][0].focus();
      // this.$refs["inputRef"].$el.children[0].focus();
      //必须使用id
      document.getElementById("inputRef").focus();
    },
  },
};
</script>

<style scoped lang="scss"></style>

<style></style>