IVIEW DatePicker 问题
最近在公司的项目中有一个无聊的设计,不知道产品大妈是无聊还是没事做,让我在表格中加一个日期选择器,而且还要判断数据库里有没有该日期,有就直接显示,没有的话,就在表格中渲染一个日期选择器供用户选择日期加时间,然后点击执行可以将该条日期加时间传到数据库里。好了,废话不多说。
1 { 2 title: "Plan-Receiving Time", 3 key: "planReceiveTime", 4 width: 160, 5 render: (h, params) => { 6 var timeDesign; 7 var me = this; 8 if (!params.row.planReceiveTime) { 9 return h('Div', [ 10 h('DatePicker', { 11 props: { 12 type: 'datetime', 13 format: 'yyyy-MM-dd HH:mm', 14 placeholder: 'date', 15 size: 'small', 16 confirm: 'true' 17 }, 18 style :{ 19 marginLeft: '1px' 20 }, 21 on: { 22 'on-change': (val) => { 23 // me.data1[params.index].planReceiveTime 24 //me.data1[params.index].planReceiveTime =val; 25 timeDesign = val; 26 console.log(val); 27 }, 28 'on-ok': () => { 29 me.data1[params.index].planReceiveTime =timeDesign; 30 this.open=false; 31 } 32 } 33 }) 34 ]) 35 }else { 36 return h('div',params.row.planReceiveTime) 37 } 38 } 39 }
实现过程中问题:
在Table中渲染一个Datepicker,如果要选择到小时或者分钟的程度,直接用on-change方法会出问题,在Datepicker上点击一个日期或者作出任何change就会收起Datepicker,然后就不能再选择时间了。
然后,我又尝试,直接用on-ok方法,这样做,当我点击日期或者作出什么改变,Datepicker不会收起来,点击确认才会收起来,能选到时间,但是on-ok方法不能得到Datepicker的值,只有on-change方法才能得到值。
解决方法:
渲染的时候on-change 、on-ok方法一起使用,具体见代码
posted on 2018-08-10 10:58 Jesseylove 阅读(7946) 评论(0) 编辑 收藏 举报