项目开发中遇到需求,需要在表格中添加时间选择器,实现表格编辑功能,百度大法后,自己总结一下
1.在饿了么表格框架中,你想要实现可编辑的列标签内加入如下代码
这里的思路就是通过vue的v-if去切换,加个template去包裹,然后给个div绑定一个点击事件,去控制当前行的isSet1属性来实现当前行的切换,这里我是通过给gridData数组中对象加了一个isSet1的布尔值来判定
如上
因为每一行都要单独实现控制,所以每个对象我都加了这个布尔值
2.然后这里的思路就是,点击当前时间,当前时间变为饿了么的时间选择器,然后输入新的时间,更改完毕后,列标变为新的值,通过时间选择器的失去焦点bluer时间和change提交时间控制数据的渲染来回赋值
@blur事件,失去焦点切换为默认视图显示
@change事件,获取当前行以及更改后的值,然后进行赋值
@click事件,将当前行的事件渲染为时间选择器里面的可编辑默认时间
3.实现效果图
原列表
点击开始时间
选择时间点击确认后变为默认的修改后的时间,搞定
前端小菜鸡成长之路,各位大佬见笑了~