基于elementUI表格实现可编辑功能

项目开发中遇到需求,需要在表格中添加时间选择器,实现表格编辑功能,百度大法后,自己总结一下

1.在饿了么表格框架中,你想要实现可编辑的列标签内加入如下代码

这里的思路就是通过vue的v-if去切换,加个template去包裹,然后给个div绑定一个点击事件,去控制当前行的isSet1属性来实现当前行的切换,这里我是通过给gridData数组中对象加了一个isSet1的布尔值来判定

如上
因为每一行都要单独实现控制,所以每个对象我都加了这个布尔值

2.然后这里的思路就是,点击当前时间,当前时间变为饿了么的时间选择器,然后输入新的时间,更改完毕后,列标变为新的值,通过时间选择器的失去焦点bluer时间和change提交时间控制数据的渲染来回赋值


@blur事件,失去焦点切换为默认视图显示
@change事件,获取当前行以及更改后的值,然后进行赋值
@click事件,将当前行的事件渲染为时间选择器里面的可编辑默认时间

3.实现效果图


原列表
点击开始时间
选择时间点击确认后变为默认的修改后的时间,搞定

前端小菜鸡成长之路,各位大佬见笑了~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容