Element动态渲染表格

话不多说直接上代码

html代码
html表格以及数据实现方式
1,tableData是整个表格渲染所需要用到的数据
2,theadData是经过处理后需要动态渲染的数据,在渲染的时候也可以绑定id便于后面的修改提交操作
在这里插入图片描述
在这里需要添加元素来回切换显示隐藏操作后的界面,实现的效果如下:
1,以下是渲染后的界面
在这里插入图片描述
2,以下是要进行某一个表个头进行修改时的界面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在input绑定blur事件或者也可以绑定回车事件,在失去焦点或者按下回车进行提交操作
注:在绑定回车事件是要注意Mac情况可能不生效
在这里插入图片描述
这样处理在Windows和Mac都可以进行正常提交

JS代码
在这里插入图片描述
在请求成功后,处理后端返回数据界面就可以正常显示了
在这里插入图片描述
这样就可以自由切换input显示隐藏了
欢迎大佬点评讨论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值