Iview: table单元格里面有input,input每输入一个字符就会自动跳出焦点

[liu-xinhui]

每输入一个字符,input都会跳出焦点,咋办呢

[webproblem]

代码中的this.actiondata是table组件的:data的值吧，在table中通过render函数自定义的时候，事件里面不能这样赋值，一种解决方式是：定义一个存储数组变量，用这个存储数组来赋值，最后再把存储数组的值赋值给this.actiondata。
如：

data: {
tempArray:[]
}

......

h("Input",{
    props: this.tempArray[params.index].id,
    on: {
        input: function(event){
           this.tempArray[params.index].id = event; 
        }
    }
})

然后再监听这个存储数组

watch: {
    tempArray: function(val){
        this.actiondata = val;   //将存储数组的值赋值给this.actiondata
    }
}

[icarusion]

The user above is correct

[lockontan]

假如你绑定的table的数据是tableData，input数据改变的时候你把整行的数据替换掉，就不会造成table重新渲染，导致input失焦了
h('InputNumber', {
props: {
value: parseInt(params.row.total),
size: 'small',
min: 0
},
on: {
input: (value) => {
params.row.total = value
this.tableData[params.index] = params.row
}
}
}

[justindeng0405]

给个赞

[inroam]

为解决办法 点赞

[Iamlqyfly]

@lockontan 我用了你这个方法，添加了this.tableData[params.index] = params.row这一行代码
input框都不能输入东西了

[lockontan]

@lIamlqyfly 贴下你的代码

[yiluxiangbei87110]

使用change代替input就可以了

[yiluxiangbei87110]

假如你绑定的table的数据是tableData，input数据改变的时候你把整行的数据替换掉，就不会造成table重新渲染，导致input失焦了
h('InputNumber', {
props: {
value: parseInt(params.row.total),
size: 'small',
min: 0
},
on: {
input: (value) => {
params.row.total = value
this.tableData[params.index] = params.row
}
}
}

使用change代替input也可以解决此问题

[hufenghuai]

为什么整行把数据替换就不会造成table重新渲染呢？

[Guing]

this.tableData[params.index] = params.row;
这样子不会做响应式更新，也不会刷新视图，重新渲染table。

[hccluck]

params.row.total = value
this.tableData[params.index] = params.row
用了这种方法来避免失去焦点问题之后，watch中怎样监听数据变化呢，监听不到数据的变化了呀，怎么办

[hccluck]

这个问题解决了没啊？在几点几的版本不会有这个问题啊？

[Dongzhichao12]

一直想用template 的方式实现这个功能。（不愿意使用render）
解决也是一样：Input事件中将整行数据放入数组对应的位置
1.整行替换@input="(value)=>{row.AttrName = value; this.data[index] = row}"
2.离焦保存@on-blur="blurAttrName (row,index)"
3.使用Form的prop进行校验