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

你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家,戳这里即可领取生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;
摘要由CSDN通过智能技术生成

另外:(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显示

  • 18
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值