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显示。

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

1：首先双击的时候，@dblclick="edit(k,sub_k,$event)"需传入$event；

2：在edit函数中 var el = event.currentTarget; 获取当前处理对象（当前的td元素），注意这里event没有处理浏览器兼容的情况，有必要的话自己可以处理一下；

3：使用setTimeout给 input获取焦点，不用setTimeout将无法获取焦点。

setTimeout(function(){

//设置input获取焦点

el.children[0].focus();

//el.children[0].select();//选中里面的数据

},0);

完整代码如下：

bordercolorlight=#CCCCCC bordercolordark=#FFFFFF class=“table” >

v-for=“(item,k) in list” :key=“k”>

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。

手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。

[外链图片转存中…(img-sPulL8jj-1712541192169)]