el-table中el-input的autofocus无法自动聚焦的解决方案

需求

有一个表格展示了一些进度信息,进度信息可以修改,需要点击进度信息旁边的编辑按钮时,把进度变为输入框且自动聚焦,当鼠标失去焦点时自动请求更新接口。

注:本例以vue2 + element UI为例

分析

这个需求看着挺简单的啊,不就是默认展示数字,点击按钮时,把数字变成输入框吗,再给个自动聚焦autofocus,再监听一下失去焦点事件,这不就完了吗

示意图如下:

于是,我兴冲冲写下了如下代码

微解释:默认显示数字且非编辑状态,点击按钮时,显示输入框

ini 复制代码
<el-table-column label="完成占比" prop="progress" align="center">
  <template slot-scope="scope">
    <div v-if="!scope.row.isEditing">
      {{ scope.row.progress }}%
      <el-button size="mini" type="text" @click="handleEditPercent(scope.$index, scope.row)">
        <i class="el-icon-edit-outline"></i>
      </el-button>
    </div>
    <el-input-number
      v-else
      :ref="'progress' + scope.$index"
      v-model="scope.row.progress"
      :min="0"
      :max="100"
      size="small"
      :controls="false"
      style="width: 80px;"
      autofocus
      @blur="handleBlur(scope.$index, scope.row)"
    ></el-input-number>
  </template>
</el-table-column>

但是,你在点击编辑按钮时,虽然显示了输入框,但是无法自动聚焦,点击后如下所示:

解决过程

看到没自动聚焦,于是乎我又想到手动聚焦,文档里有这方法,然后我又兴冲冲地试了下:

但是这是el-table中的el-input,都是循环渲染的,单个ref变了和值不好处理,虽然也能做,但这种方法也失败了。

后来分析了下,el-table 属于动态渲染组件,在表格渲染时,el-input 可能还未完全挂载到 DOM 上,所以 autofocus 属性不能正常发挥作用。

于是就转换了下思路,我也不需要啥啥乱七八糟的东西了,我只希望这个el-input出现时,我能通过这个dom节点的父节点查询到input,然后执行focus()方法

于是,我又封装了个指令,这下就不用管其他乱七八糟的东西了,只需要专注于本身:

css 复制代码
directives: {
  focus: {
    inserted: function (el) {
      el.querySelector('input').focus()
    }
  }
},

然后在el-input里加了v-focus指令,这次再点击编辑按钮,终于亮了

原本以为是个小功能,没想到坑这么多!

相关推荐
全宝5 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele28 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮35 分钟前
【无标题】
开发语言·前端·javascript
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子3 小时前
Blob 对象及 Base64 转换指南
前端