背景
有一个场景,需要在表格中渲染输入框。这简单,但是,当我美美的欣赏的时候发现了一个问题。
嗯,我输入一个字符后,就失去焦点了!这是why?删除一个就失去焦点了!
代码
const desc = h('span', {
style: { margin: '0 10px' },
}, "至");
const maxDistance = h('Input', {
props: {
type:'text',
value: params.row.maxDistance
},
style: {
width: '50px'
},
on: {
'on-change': (e) => {
params.row.maxDistance = e.target.value;
//整行赋值,就不会触发重新编译
this.allowanceConfigList[params.index] = params.row;
}
}
});
return h('div',{},[
minDistance,
desc,
maxDistance,
],'');
失焦原因
input数据改变,导致table重新渲染了。如果在input数据改变的时候,把整行数据都替换掉,就不会造成table重新渲染。