问题:iview中表格组件通过render函数动态生成Input组件输入框插入表格中,动态生成的Input输入框组件无法绑定v-model,这个时候我们需要实现双线绑定的功能。

item.render = (h, param) => {
let currentRowData = vm.formItem.config_list[param.index];
return h('Div',{
style:{
display:'flex'
},
},
[
h('Input',{
props:{
value:currentRowData[item.key],
},
domProps:{
id:item.key+param.index
},
on:{
'on-change':(event) => {
vm.formItem.config_list[param.index][item.key] = event.target.value;
this.$nextTick(()=>{
var Odiv = document.getElementById(item.key+param.index)
var iptarr = Odiv.getElementsByTagName('input')
iptarr[0].focus()
})
}
},
}),
h('Span',{
style:{lineHeight:'32px',marginLeft:'2px',
overflow:'hidden',
textOverflow:'ellipsis',
whiteSpace:'nowrap',
width:'2em'
},
on:{
}
},
item.unit)
]
);
}
在输入框输入值改变时,onchange函数里,把改变后的值赋给绑定的值,这个操作会导致输入框失去焦点,需要再次点击输入框才能输入,十分影响用户体验。解决办法:在this.$nextTick(()=>{})里再次获取焦点。
这个方法是vue提供的一个api,它的作用是等dom渲染完成之后才执行的方法,具体nextTick的作用可以参考vue官方文档https://cn.vuejs.org/v2/api/#Vue-nextTick
网友评论