需求

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

注：本例以vue2 + element UI为例

分析

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

示意图如下：

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

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

<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-numberv-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()方法

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

directives: {focus: {inserted: function (el) {el.querySelector('input').focus()}}
},

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

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