最近在公司的项目中有一个无聊的设计,不知道产品大妈是无聊仍是没事作,让我在表格中加一个日期选择器,并且还要判断数据库里有没有该日期,有就直接显示,没有的话,就在表格中渲染一个日期选择器供用户选择日期加时间,而后点击执行能够将该条日期加时间传到数据库里。好了,废话很少说。数据库
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 }
实现过程当中问题:this
在Table中渲染一个Datepicker,若是要选择到小时或者分钟的程度,直接用on-change方法会出问题,在Datepicker上点击一个日期或者做出任何change就会收起Datepicker,而后就不能再选择时间了。spa
而后,我又尝试,直接用on-ok方法,这样作,当我点击日期或者做出什么改变,Datepicker不会收起来,点击确认才会收起来,能选到时间,可是on-ok方法不能获得Datepicker的值,只有on-change方法才能获得值。设计
解决方法:code
渲染的时候on-change 、on-ok方法一块儿使用,具体见代码orm