vue 点击编辑按钮 显示input输入框同时获取焦点

最近在做一个使用element-ui组件库搭建的后台系统的项目，遇到一个需求是：在table列表里面点击编辑，可以实现编辑内容的需求大概就是下面图的样子：

项目图

然后就是点击编辑按钮可以实现编辑table表里面的内容。实现过程都很顺利，然后发现点击编辑变成input输入框后获取不到焦点。

然后尝试使用原生属性autofocus，但是这个属性 只在模板加载完成时起作用，也就是说只有第一次有用。

然后尝试了ref，再this.$refs.el 也不能成功拿到该元素，因为饿了么组件封装的<el-input>对应的是外面一个div，里面包了个input，在获取元素的时候有问题的。然后决定使用原生的input标签代替element-ui里面的el-input组件。

然后然后查看vue文档决定用，diretives 自定义指令，完美实现需求。

实现代码如下

HTML代码：

特别注意：再编辑内容和输入框的切换时要使用v-show进行切换，自定义一个focusState值

js代码：

自定义指令

事件

最后完美实现功能