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

前端没钱2025-04-22 17:25

需求

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

注：本例以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指令，这次再点击编辑按钮，终于亮了

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