我们项目中遇到双击修改信息也比较常见，尤其是后台管理系统

如上图，这就是一个可以对关键词进行手动排序的功能，双击数字的span标签后，span变成一个文本框，失去焦点则变回来，并根据排名按照从小到大重新排序。

起初用原生代码来写，逻辑很简单，但是有问题，

第一是很丑，不过可以在创建的时候写样式，能解决。

第二是，你的失焦事件只能写在双击事件里，或者render函数中，也还行。

第三是，如果你已经触发了第一个的双击事件，但是再去双击第二个，页面上就会出现多个input，由于我的页面很简单，没有其他的input，于是我在双击事件的一开始先判断页面上有没有input，有的话，用span替换过来，但是如果有其它input，就不能这样用了。

总之就是，有小坑，不过都能解决，但是解决了之后，你的代码就是一大坨。

我说上面这么多废话，是因为我都用原生写完了，也部署到服务器了，但是太丑了，自己没眼看，于是删掉重新换了个思路。

如下：

先把标签都写好，用布尔值控制显隐

每一条数据要有单独的布尔值，如果你的数据很多，可以让后台多返回一个布尔值字段，我因为一共只有十个关键词，就在初始获取数据的时候自己循环添加了，默认为false。

两个方法如下：

好啦~

另：elementui的table有一个cell-dbclick方法，把这个方法写在el-table标签中，其它的不变就可以了。scope.$index可以获取每一行的索引

使用elementui的cell-dbclick函数实现编辑指路：https://www.cnblogs.com/yixiaoyang-/p/9771652.html