Vue经典实例之可编辑的表格table（史上最简单方便的处理方式，比用element容易理解），同时处理input获取焦点的问题！不好用你找我

另外：（input获得焦点的处理）

完整代码如下：

欢迎指正！！！

---

重点：

1.给td添加双击事件 @dblclick=“edit(k,sub_k,$event)” ，此函数的作用是将k，sub_k用下滑线组装起来，并赋值给 editKey。

2.td的两个元素： input元素用v-show=“editKey===k+‘_’+sub_k” （默认是隐藏的）；p元素使用v-show=“editKey!==k+‘_’+sub_k” （默认是显示的）。

3.当dblclick 双击事件执行后，当前点击的td下的input中editKey===k+‘_’+sub_k为true，input会被推出来显示，

同时p中editKey!==k+‘_’+sub_k为false，所以p隐藏起来，于是达到编辑的效果。

4.input使用双向绑定 v-model=‘sub_item.a’，在修改input内容时，会自动更新到data中，修改后到console打印一下数据就清楚了。

5.input绑定焦点离开事件 @blur=“editDis”，触发后将editKey设置为null;于是input中editKey===k+‘_’+sub_k为false隐藏，同时p中editKey!==k+‘_’+sub_k为true显示